@charset "UTF-8";

/* Body */
body {
	font-family: source-sans-pro;
	background-color: #e9eceb;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
	background-image: url(../images/microcontroller.png);
}

/* Container */
#container {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	/* height: 1000px; */
	background-color: #e9eceb;;
}

/* Navigation */
header {
	width: 100%;
	height: 5%;
	background-color: #17cac7;
	/* border-bottom: 3px solid #1093b8; */
	display: inline-block;
}
nav {
	float: right;
	width: 50%;
	text-align: right;
	margin-right: 25px;
}
header nav ul {
	list-style: none;
	float: right;
}
/* inline-block */
nav ul li {
	display: inline-block;
	/* float: left; */
	color: #FFFFFF;
	font-size: 14px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: bold;
	transition: all 0.3s linear;
}

/* logo */
.logo {
	/* color: #fff;
	font-weight: bold;
	text-align: undefined;
	width: 10%; */
	float: left;
	margin-top: 8px;
	margin-left: 25px;
	/* letter-spacing: 4px; */
}
.logo > img {
	/* display: block; */
	width: 50%;
}

/* pseudo class  */
/* unvisited link */
ul li a:link{
	color: #0f8583;
}
/* visited link */
ul li a:visited{
	color: #154367;
}
/* mouse over link */
ul li a:hover{
	color: #0f8583;
}
ul li a:active{
	color: #FF0000;
}

b, em, ol{
	color: #0f8583;
}

strong{
	color: #154367;
}

/* Main Image */
.img-main{
	max-width: 1920px;
	margin: 0 auto;
	background-color: #B3B3B3;
}

/* RWD - Image */
.img-main > img {
	display: block;
	width: 100%;
}

.gallery {
	max-width: 500px;
	margin: 0 auto;
	background-color: #B3B3B3;
}

.gallery > img {
	display: block;
	width: 100%;
}

.youtube{text-align: center;}

/* button */
.button {
	background-color: #0f8583; /* button colour */
	border: none;
	color: white;
	padding: 2px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 4px;
}

.button:hover{
	background-color: #154367;
	opacity: 0.5; /* Transparency */
}

/* footer */
.footer{
	padding: 10px 10px;
    margin-left: 80px;
	background-color: rgb(233, 236, 235, 0.5);
	/* opacity: 0.5; */
}


/* h1 */
.heading01{
	font-family: 'Russo One', Times, sans-serif;
	text-align: center;
	color: #2d2d2f;
}

/* h2 */
h2{
	font-family: 'Courier New', Courier, monospace;
	font-style:normal;
	font-weight: bold;
	font-variant:normal;
	color: rgba(45, 45, 47, 1);
}

/* h3 */
h3{
	font-family: 'Times New Roman', Times, serif;
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
	color: #2d2d2f;
}

/* paragraph */
p{
	font-family: 'Ubuntu', Verdana, Tahoma, sans-serif;
	color: #56565f;
}

#contents{
	padding: 0px 10px;
	margin: auto;
	/* border: 1px solid #56565f; */
}

/* block-level Element */
blockquote{
	font-family: Tahoma, Verdana, sans-serif;
	padding: 10px 20px;
	margin: auto;
	border: 3px dotted rgba(21, 67, 103, 0.3);
}

/* Table */
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-hrrh{background-color:#ffffff;border-color:#000000;color:#333333;text-align:left;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}

.table{
    margin-left: 400px;
}

/* Mobile */
@media (max-width: 320px) {
	.logo {
		width: 100%;
		text-align: center;
		margin-top: 13px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
	}
	#container header nav {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		width: 100%;
		float: none;
		display: none;
	}
	/* header nav ul {
	} */
	nav ul li {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		width: 100%;
		text-align: center;
	}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	.logo {
		width: 100%;
		text-align: center;
		margin-top: 13px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		color: #043745;
	}
	#container header nav {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		width: 100%;
		float: none;
		overflow: auto;
		display: inline-block;
		background: #52bad5;
	}
	header nav ul {
		padding: 0px;
		float: none;
	}
	nav ul li {
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		width: 100%;
		text-align: center;
		padding-top: 8px;
		padding-bottom: 8px;
	}
}