html {
	background: url(../images/background.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  background: rgb(230,230,230);
  
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}

a{
  color:White;
 }

 b{
  color:Black;
 }
 
 h1 {
  font-size:2em;
  text-align:center;
  margin:20px 0 40px;
  padding:0;
}

h4 {
  
  /* background-color: #F9F9F9; */
  color: white;
  font-weight: normal;
  /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(0, 0, 0);
  /* RGBa with 0.6 opacity */
  /*background-color: rgba(12, 92, 169, 0.90); */
  background-color: rgba(10, 10, 10, 0.70);
       /* padding:3px 8px; */
       /* text-shadow: 3px 2px black; */

  /* color: #fff;
  background: #0686c9;
  z-index:2; */
}

.introduction{

	/* Old Background background-color: rgba(0,149,80,0.88); */
	/* color: white; */
	background: url(../images/background.jpg) no-repeat center fixed ;
	background-size: 100% 100%;
	padding: 40px; 
	height: 600px auto;
	width: 700px auto;
	margin: 0px auto;
}

.education{

	/* background-color: rgba(0,153,0,0.80); */
  /* Source Gradient http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28top\%2C\%20rgba\%28113\%2C170\%2C173\%2C1\%29\%200\%25\%2C\%20rgba\%286\%2C83\%2C85\%2C1\%29\%20100\%25\%29\%3B' */

	/* background: rgba(179,218,244,1);
	background: -moz-linear-gradient(top, rgba(179,218,244,1) 0%, rgba(94,167,222,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,218,244,1)), color-stop(100%, rgba(94,167,222,1)));
	background: -webkit-linear-gradient(top, rgba(179,218,244,1) 0%, rgba(94,167,222,1) 100%);
	background: -o-linear-gradient(top, rgba(179,218,244,1) 0%, rgba(94,167,222,1) 100%);
	background: -ms-linear-gradient(top, rgba(179,218,244,1) 0%, rgba(94,167,222,1) 100%);
	background: linear-gradient(to bottom, rgba(179,218,244,1) 0%, rgba(94,167,222,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3daf4', endColorstr='#5ea7de', GradientType=0 ); */
 


background: rgba(10,0,120,1);
background: -moz-linear-gradient(top, rgba(10,0,120,1) 0%, rgba(0,146,156,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(10,0,120,1)), color-stop(100%, rgba(0,146,156,1)));
background: -webkit-linear-gradient(top, rgba(10,0,120,1) 0%, rgba(0,146,156,1) 100%);
background: -o-linear-gradient(top, rgba(10,0,120,1) 0%, rgba(0,146,156,1) 100%);
background: -ms-linear-gradient(top, rgba(10,0,120,1) 0%, rgba(0,146,156,1) 100%);
background: linear-gradient(to bottom, rgba(10,0,120,1) 0%, rgba(0,146,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0078', endColorstr='#00929c', GradientType=0 );


	color: white;
	padding: 40px;
	height: 400px auto;
	width: 700px auto;
	margin: 0px auto;
}

.contact{

	background-color: #474747;
	color: inherit;
	text-decoration: none;
	padding: 40px;
	height: 50px auto;
	width: 140px auto;
	margin: 0px auto;
}

.profile_pic{
	height: 160px;
	width: 160px;
	border-radius: 70%;
}

.experience{

	/* background-color: rgba(81,15,146,0.88); */
	color: white;



background: rgba(0,146,156,1);
background: -moz-linear-gradient(top, rgba(0,146,156,1) 0%, rgba(0,128,77,1) 72%, rgba(0,128,77,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,146,156,1)), color-stop(72%, rgba(0,128,77,1)), color-stop(100%, rgba(0,128,77,1)));
background: -webkit-linear-gradient(top, rgba(0,146,156,1) 0%, rgba(0,128,77,1) 72%, rgba(0,128,77,1) 100%);
background: -o-linear-gradient(top, rgba(0,146,156,1) 0%, rgba(0,128,77,1) 72%, rgba(0,128,77,1) 100%);
background: -ms-linear-gradient(top, rgba(0,146,156,1) 0%, rgba(0,128,77,1) 72%, rgba(0,128,77,1) 100%);
background: linear-gradient(to bottom, rgba(0,146,156,1) 0%, rgba(0,128,77,1) 72%, rgba(0,128,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00929c', endColorstr='#00804d', GradientType=0 );

	/* padding: 40px;
	height: 400px;
	width: 700px auto;
	margin: 0px auto;
	
	overflow:auto;
	padding:2%; */

	color: white;
	padding: 40px;
	height: 400px auto;
	width: 700px auto;
	margin: 0px auto;


}

.skills{

  /* background-color: rgba(81,15,146,0.88); */
  color: white;



background: rgba(0,128,77,1);
background: -moz-linear-gradient(top, rgba(0,128,77,1) 0%, rgba(71,71,71,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,128,77,1)), color-stop(100%, rgba(71,71,71,1)));
background: -webkit-linear-gradient(top, rgba(0,128,77,1) 0%, rgba(71,71,71,1) 100%);
background: -o-linear-gradient(top, rgba(0,128,77,1) 0%, rgba(71,71,71,1) 100%);
background: -ms-linear-gradient(top, rgba(0,128,77,1) 0%, rgba(71,71,71,1) 100%);
background: linear-gradient(to bottom, rgba(0,128,77,1) 0%, rgba(71,71,71,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00804d', endColorstr='#474747', GradientType=0 );

  /* padding: 40px;
  height: 400px;
  width: 700px auto;
  margin: 0px auto;
  
  overflow:auto;
  padding:2%; */

  color: white;
  padding: 40px;
  height: 400px auto;
  width: 700px auto;
  margin: 0px auto;


}


.timeline2{


  background-color: #0a0078; /*rgba(128,0,128)*/
  color: inherit;
  text-decoration: none;
  padding: 40px;
  height: 50px auto;
  width: 140px auto;
  margin: 0px auto;

background: rgba(69,69,69,1);
background: -moz-linear-gradient(top, rgba(69,69,69,1) 0%, rgba(10,0,120,1) 9%, rgba(10,0,120,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(69,69,69,1)), color-stop(9%, rgba(10,0,120,1)), color-stop(100%, rgba(10,0,120,1)));
background: -webkit-linear-gradient(top, rgba(69,69,69,1) 0%, rgba(10,0,120,1) 9%, rgba(10,0,120,1) 100%);
background: -o-linear-gradient(top, rgba(69,69,69,1) 0%, rgba(10,0,120,1) 9%, rgba(10,0,120,1) 100%);
background: -ms-linear-gradient(top, rgba(69,69,69,1) 0%, rgba(10,0,120,1) 9%, rgba(10,0,120,1) 100%);
background: linear-gradient(to bottom, rgba(69,69,69,1) 0%, rgba(10,0,120,1) 9%, rgba(10,0,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#0a0078', GradientType=0 );

}


/* ================ The Timeline ================ */

.timeline {
  background-color: #0a0078; /* rgba(128,0,128) */
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(128,0,128);
  background: -moz-linear-gradient(top, rgba(245,245,240,0) 0%, rgb(245,245,240) 8%, rgb(245,245,240) 92%, rgba(245,245,240,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(245,245,240,0) 0%, rgb(245,245,240) 8%, rgb(245,245,240) 92%, rgba(245,245,240,0) 100%);
  background: -o-linear-gradient(top, rgba(245,245,240,0) 0%, rgb(245,245,240) 8%, rgb(8245,245,240) 92%, rgba(245,245,240,0) 100%);
  background: -ms-linear-gradient(top, rgba(245,245,240,0) 0%, rgb(245,245,240) 8%, rgb(245,245,240) 92%, rgba(245,245,240,0) 100%);
  background: linear-gradient(to bottom, rgba(245,245,240,0) 0%, rgb(245,245,240) 8%, rgb(245,245,240) 92%, rgba(245,245,240,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255,80,80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(245,245,240);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {
  background-color: #0a0078;
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: #0a0078;
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	box-shadow: 0 0 1px rgba(0,0,0,0.20);
	
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px ?? max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
	margin: 1em 4em 0 4em;
}
}



 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1e1e1e /* #377fca; */
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}






 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}