body {
	margin: 0px;
	padding: 0px;
	/*height: 50%;*/
	/*background-image: url("img/pic1.jpg");  */
  /* Background image is centered vertically and horizontally at all times */
  /*background-position: center center;*/
  
  /* Background image doesn't tile */
  /*background-repeat: no-repeat;*/
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  /*background-attachment: fixed;*/
  
  /* This is what makes the background image rescale based
     on the container's size */
  /*background-size: cover;*/
  
  /* Set a background color that will be displayed
     while the background image is loading */
  /*background-color: #464646;*/
}
@font-face{
	font-family: Campton-LightDEMO;
	src: url('font/Campton-LightDEMO.otf');
}
@font-face {
	font-family: Campton Book;
	src: url('font/campton-book.ttf');
}
.container {
	margin: 0px;
	width: 100%;
	height: 100vh;
	/*background-color: #ccc;*/
}
#header {
	width: 100%;
	margin: 0;
	padding: 0;
}
.tabcolor{
	display: block;
	width: 35%;
	margin: 0;
	padding: 0;
}
#topic {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
.topictext {
	width: 100%;
}
.text1 {
	font-family: 'Campton Book';
	font-size: 20pt;
	text-align: center;
}
.text2 {
	font-family: 'Campton-LightDEMO';
	font-size: 20pt;
	text-align: center;	
	margin-top: 40px;
}
#logo {
	width: 100%;
	/*background-color: blue;*/
}
.logo_cl {
	width: 15%;
	display: block;
	margin: 0 auto;
}
.buttonlink {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	/*background-color: red;*/
}
.buttonlinkfb {
	width: 100%;
	text-align: center;
}
.btn {
	display: inline-block;
	background-color: white;
	border-radius: 5px;
	border: solid #333 1px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
}
.btn:hover {
	display: inline-block;
	background-color: rgb(59, 89, 152);
	border-radius: 5px;
	border: solid #333 1px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
}
.btnlink {
	font-family: 'Campton Book';
	margin: 3px;
	color: #333;
	text-decoration: none;
}
.btnlink:hover {
	margin: 3px;
	color: #FFF;
	text-decoration: none;
}
.btnfb {
	margin-left: 10px;
}
.logofb {
	width: 3%;
	/*margin-top: 10px;*/
}
.footer {
	width: 100%;
}
.footer .textfooter {
	font-family: 'Campton Book';
	font-size: 10pt;
	text-align: center;
}


/*Responsive Web Design*/
 @media only screen and (max-width: 768px) {
	.container {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: 100vh;
	}
	#header {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.tabcolor{
		display: block;
		width: 45%;
		margin: 0;
		padding: 0;
	}
	#topic {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	.topictext {
		width: 100%;
	}
	.text1 {
		font-family: 'Campton Book';
		font-size: 12pt;
		text-align: center;
	}
	.text2 {
		font-family: 'Campton Book';
		font-size: 12pt;
		text-align: center;	
	}
	#logo {
		width: 100%;
		/*background-color: blue;*/
	}
	.logo_cl {
		width: 30%;
		display: block;
		margin: 0 auto;
	}
	.buttonlink {
		width: 100%;
		text-align: center;
		display: block;
		/*background-color: red;*/
	}
	.login {
		background-color: white;
		border-radius: 5px;
		border: solid #333 1px;
		padding: 10px;
		color: #333;
		/*margin: 0 auto;*/
	}
	.btnlink {
		color: #333;
		text-decoration: none;
	}
	.logofb {
		width: 5%;
	}
	.linkfb {
		margin-right: auto;
		margin-left: auto;
	}
	.footer {
		width: 100%;
	}
	.footer .textfooter {
		font-family: 'Campton Book';
		font-size: 8pt;
		text-align: center;
	}
} 
@media only screen and (max-width: 468px) {
	.logofb {
		width: 10%;
	}
}