*{
	color: rgb(32,32,32);
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
	
}
body{
	width: 100%;
	margin: 0;
	font-size: 12px;
}

.nav-list{
	position:fixed;
	display: block;
	top: 0;
	width: 100%;
	list-style: none;
	padding: 5px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 0px;
	margin: 0 auto;
	margin-top: 0px;
	box-shadow: 0px 1px 2px rgb(116,116,116);
	background-color: rgba(96,125,139,1);
	/*border-bottom: solid 1px rgba(254,254,254,0.2);*/
}
.nav-list li {
	display: inline-table;
	padding: 20px;
	/*border-right: solid 1px rgba(254,254,254,0.2);*/
	color: rgba(254,254,254,0.6);
	font-size: 1.5em;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
	margin: 0 auto;
}
.selected{
	box-shadow: inset 0 -2px 0px rgba(254,254,254,1);
	color: rgb(254,254,254);
}
.nav-list li:hover{
	
	color: rgba(254,254,254,1);
	cursor: pointer;
	/*box-shadow: inset 0 -2px 0px rgba(254,254,254,1);*/
	
}
.titleblock{
	width: 100%;
	margin: 20px auto;
	text-align: center;
	padding: 50px;
	background: rgba(96,125,139,0.7);
	box-shadow: 0px 1px 1px rgb(116,116,116);
	
}
.titleblock h1{
	color: rgba(254,254,254,0.9);
	font-weight: 100;
	font-size: 2.5em;
}
.titleblock h2 {
	color: rgba(254,254,254,0.7);
	font-weight: 100;
}
.titleblock img{

}
.thecontent{
	font-weight: 100;
	
	margin: 20px auto;
	display: block;
	padding: 10px;
	
}
@media screen and (min-width: 1151px){
	.thecontent{
		width: 65%;
		font-size: 1.5em;
	}
	.thecontent h2{
		font-size: 2em;
	}
	.thecontent h3{
		font-size: 1.5em;
	}
	.titleblock{
		font-size: 2em;
		padding: 50px 35px 15px 35px;
	}
	.titleblock img{
		width: 256px;
		height: 256px;
		display: inline-block;
	}
	.tutorial img{
	float: left;
	height: 256px;
	width: 256px;
}
	.tutorial{
		width: 75%;
		vertical-align: middle;
	}
	.thebottom a{
		font-size: 1.25em;
	}
}
@media screen and (min-width: 769px) and (max-width: 1150px){
	.thecontent{
		width: 75%;
		font-size: 1.5em;
		
	}
		.thecontent h2{
		font-size: 2em;
	}
	.thecontent h3{
		font-size: 1.5em;
	}
	.titleblock{
		font-size: 1.5em;
		padding: 50px 35px 35px 35px;
	}
		.titleblock img{
		width: 256px;
		height: 256px;
		display: inline-block;
	}
	.tutorial img{

	height: 256px;
	width: 256px;
	float: left;
	}
	.tutorial{
		width: 85%;
		vertical-align: middle;
	}
	.thebottom a{
		font-size: 1.5em;
	}
}

@media screen and (max-width: 768px){
	.thecontent{
		width: 85%;
		font-size: 1.25em;
	}
		.thecontent h2{
		font-size: 2.5em;
	}
	.thecontent h3{
		font-size: 1.5em;
	}
	.titleblock{
		
		font-size: 1.25em;
		padding: 45px 25px 25px 25px;
	}
		.titleblock img{
		width: 75%;
		margin-top: 10px;
		display: inline-block;
	}
	.tutorial img{

		width:95%;
  		

	}
	.thebottom a{
		font-size: 1.25em;
	}
}
}
.thecontent h2{
	font-weight: 100;

	/*border-bottom: solid 1px rgba(188,188,188,1);*/
	padding: 5px;
}
.thecontent h3{
	padding: 2px;
	font-weight: 100;
	border-bottom: solid 1px rgba(188,188,188,1);
	color: rgba(67,137,254,1);
}
.thecontent p{
	border: none;
	font-weight: 100;
	color: rgba(116,116,116,0.95);
	text-indent: 0px;
}
.codewrap{
	padding: 5px;
	font-size: 0.75em;
	background-color: rgba(188,188,188,0.3);
	border-radius: 4px;
	color: rgba(240, 60, 46, .75);
}
.tutorial{

	background-color: rgba(188,188,188,0.5);
	border-radius: 5px;
	padding: 10px;
	display: inline-block;
	margin: 25px;
	transition: all 0.2s ease-in-out;
	box-shadow: 1px 1px 5px rgb(116,116,116);
}
.tutorial img{
	display: inline-block;
}
.tutorial h1{
	font-size: 3em;
	padding: 3px;
}
.tutorial p{
	font-size: 24px;
}
.thecontent img{
	width: 95%;
}
.container{
	display: block;
	justify-content: space-between;
	margin: 0 auto;
	text-align: center;
}
.thebottom{
	width: 100%;
	margin: 0 auto;
	color: rgba(116,116,116,0.75);
	text-align: center;
	padding: 20px;
}
.thebottom a{
	color: rgba(116,116,116,0.75);
	text-decoration: none;
}
.thebottom a:hover{
	text-decoration: underline;
}
background-color: rgba(24,117,209,0.95);