body {
	font-family: "Century Gothic";
}

* {
	box-sizing: border-box; 
}
/*

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page.

The CSS box-sizing property allows us to include the padding and border in an element's total width and height. 

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. 

*/

.container {
	border-radius: 5px;
	background-color: #f2f2f2;
	padding: 20px;
}

label {
	padding: 12px 12px 12px 0;
	display: inline-block;
}

input[type=text], select, textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}

input[type=submit] {
	float: right;
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #45a049;
}

.col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
}
.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}


/*---------------------------------------
  Note: Mao ni mga nadungag na css
---------------------------------*/

/* New Css code for logo */
.logo {
  float:left;
  margin:20px;
}

/* New Css code for navigation */
.navigation {
  float:right;
  list-style-type:none;
  margin-right:30px;
  margin-top:40px;
}
.navigation li {
  display:inline-block;
  margin-left:30px;
}

/* New Css code for navigation link*/
.navigation li a{
  text-decoration:none;
  color:#222;
}
.navigation li a:hover{
  color:#ff02fc;
}

/* New Css code for navigation footer*/
.footer{
  display:block;
  text-align:center;
  padding:15px 0;
}

/*for boxes in homepage */
.boxWrap{
  text-align:center;
  margin-top:50px;
}
.box{
  width:380px;
  height:300px;
  margin-right:40px;
  display:inline-block;
  background:#fe8eff;
}

@media screen and (max-width:960px){
	.col-25, .col-75, input[type=submit]{
		width:100%;
		margin-top: 0;
	}


/* new css for logo, navigation in mobile view */

.logo {
  float:none;
  text-align:center;
  display:block;
  }
.navigation {
  float:none;
  padding:0;
}
.navigation li{
  display:block;
  width:100%;
  border-bottom:1px dotted #555455;
  margin-left:0;
  text-align:center;
  padding:20px 0;
}

.box {
  width:100%;
  margin:0 0 20px 0;
}

}