body {
	
	background-color: #F0FFF0;
	margin: 0px;
	font-family: verdana, Georgia, serif;
	font-size: 14px;
	
}

#header {
	
	background-color: #5c755e;
	margin: 0px;
	height: 100px;	
	text-align: right; 
	padding: 5px;
	/*border-radius: 5px; */
	
}
img {

max-width:100%; 
max-height:100%; 
text-align: left;
}

#navbar ul{
	padding: 15px;
	list-style-type: none;
	text-align: center;
	background-color: #000;
	margin: 0px;
	/*height: 55px;       */ 
	/*border-radius: 5px; */
	
}
 
#navbar ul li {
	
	display: inline;
	
}

#navbar ul li a{
	text-decoration: none;
	font-family: arial;
	padding: .2em lem;
	color: #fff;
	background-color: #000;
	
} 

#navbar ul li a:hover{
	color: #000;
	background-color: #fff;
	
}	

#footer {
	background-color: #5c755e;
	top: 5px;
	width: 100%;
	margin: 0px;
	height: 65px;
	text-align: center;
		
}

.main { 
	background-color: #e5e4d7;
	margin: 10px;
	border-radius: 5px;
	padding: 20px;
	font-size: 110%;
	height:240px; 
	
}

.main1 { 
	background-color: #00FFFF;
	margin: 10px;
	border-radius: 5px;
	padding: 20px;
	font-size: 110%;
	height:220px; 
	
}

h4 {
	font-size: 250%;
	text-align: center;
	color: #e5e4d7;
	font-family: "Century Gothic", "Gill Sans", Arial, sans serif;
	margin: 0px;
	
	position: relative;
	top: 50%;
	-webkit-transform: translatey(-50%);
	-ms-transform: translatey(-50%);
	transform: translatey(-50%);	
	
}
.container {
  position: relative;
}

.container1 {
  padding: 25px;
}

.container2 {
  padding: 25px;
}

.container3 {
  position: relative;	
  padding: 25px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}


.facepic {
	height: 370px;
	width: 360px;
	border-radius: 50%;
	
}

/*   this area is for the 2 COLUMNS  About me area update and tune up ---- style       */

* {
  box-sizing:border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

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

.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;
  height: 425px;
}

.column-33 {
  float: left;
  width: 33.33333%;
  padding: 20px;
  height: 425px;
}

.column-a {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 525px;           /* this define the height of the 3 boxes layout in the project AREA*/
}

.column-c {
  float: left;
  width: 50.00%;
  padding: 10px;
  height: 425px;           /* this define the height of the 2 boxes layout in the experience AREA*/
}

.large-font {
  font-size: 48px;
}

.xlarge-font {
  font-size: 64px
}

.button {						/** this button can be as a template **/
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: #04AA6D;
}

@media screen and (max-width: 1000px) {
  .main,
  .main1,
  .column-66,
  .column-a,                       /* this column-a is for included in multimedia presentation keep uniform in tablet or cellphone */
  .column-33 {
    width: 100%;
    text-align: center;
  }
  
.sticky{                    /* no activated */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%
	
}  

.sticky + .container1 {     /* no activated */
  padding-top: 60px;
}