body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding-top:20px;
}

/*Navbar Start*/

.navbar {
  background-color:#626D74;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.75);
  border: none;
  border-radius: 2px;
}

.navbar.navbar-default a {
  color: white;
  font-family: 'Raleway', serif;
  text-shadow: 2px 2px black;
}

.nav.navbar-nav li a{
  color: white;
  font-family: 'Droid serif', serif;
  text-shadow: 1px 1px black;
  font-weight: 500;
}

.nav.navbar-nav li a:hover,
.navbar.navbar-default a:hover {
  background-color: #3F3F3F;
  color: white;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.navbar-default .navbar-toggle:hover {
  background-color: #3F3F3F;
}

.navbar-toggle.collapsed {
  background-color: #212121;
}


/*Navbar Finish*/

/*Header Start*/

.header {
  background: radial-gradient(at center bottom,     #21A2E1, #123) fixed;
  height: 600px;
  background-size: cover;
}

.header h1 {
  color: #FFF; 
  font-family: 'Raleway',sans-serif; 
  font-size: 70px; 
  font-weight: 800; 
  line-height: 72px; 
  margin: 200px 0px 30px; 
  text-align: center; 
  text-transform: uppercase;
  text-shadow: 2px 3px #000000;
}

.header h2 {
  color: #ffffff; 
  font-family: 'Droid serif', serif;  
  font-size: 30px; 
  font-weight: 800; 
  line-height: 72px;
  text-align: center;
  text-shadow: 2px 3px #000000;
}

/*Header Finish*/

/*About Start*/

#righthalf{
  background:url('http://androidwallpape.rs/content/02-wallpapers/78-street/wallpaper-2594020.jpg') fixed;
  background-size: cover;
  position: relative;
  height: 500px;
}

#lefthalf{
  background-color: #6A8D9D;
  height: 500px;
  padding-top: 20px;
}

.about h1 {
  color: #fff; 
  font-family: 'Raleway', serif;  
  font-size: 50px; 
  font-weight: 800; 
  line-height: 62px;
  text-align: center;
  text-shadow: 2px 3px #000000;
}

.about h3 {
  color: #fff; 
  font-family: 'Droid serif', serif;  
  font-size: 25px; 
  font-weight: 500; 
  line-height: 40px;
  text-align: center;
}

.picture img{
  height: 300px;
  margin: 40px auto;
}

/*About Finish*/

/*Portfolio Start*/
.portfolio{
  background-color: #CC5734;
}

.portfolio h1 {
  color: #ffffff; 
  font-family: 'Raleway', serif;  
  font-size: 50px; 
  font-weight: 800; 
  line-height: 62px;
  text-align: center;
  text-shadow: 2px 3px #000000;
}

.thumbnail-grid {
	user-select: none
}
.thumbnail-grid figure {
	position: relative;
	min-width: 100px;
	height: 150px;
	margin: 0px;
	box-shadow: inset 0 -40px 0 0 rgba(41, 48, 63, .5);
	transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover {
	box-shadow: inset 0 -150px 0 0 rgba(41, 48, 63, .8);
}
.thumbnail-grid figcaption {
	position: absolute;
	width: 100%;
	font-weight: 300;
  font-family: 'Droid serif', serif;
	text-align: center;
	color: #f4f4f4;
	text-shadow: 0 0 3px #000;
	bottom: 10px;
	transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover figcaption {
	bottom: 60px;
}
.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: stretch
}

.flex-item {
	flex: 1 0 auto
}

.thumbnail-grid figure.i1 {
	background: url(http://wallpapercave.com/wp/MAmPaLt.jpg) no-repeat center;
	background-size: cover;
}
.thumbnail-grid figure.i2 {
	background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSvm3HlZRidfx5oMKYY-Zuh0z_TmGKTXdrdmYSZZqgb_lbevRxm) no-repeat center;
	background-size: cover;
}
.thumbnail-grid figure.i3 {
	background: url(https://images.alphacoders.com/538/53823.jpg) no-repeat center;
	background-size: cover;
}
.thumbnail-grid figure.i4 {
	background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcvx8qf1WdEUkzBWyiUpRd7JyvNWO6EA6FEJ8mdjTKvbYOAoYkAg) no-repeat center;
	background-size: cover;
}
.thumbnail-grid figure.i5 {
	background: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTtpnd1nXE0uMByz69RtmeVrPgspCPsv3P6XvCIRDEsIzSSwBzf) no-repeat center;
	background-size: cover;
}
.thumbnail-grid figure.i6 {
	background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOadcw1wHm173ad174FwlGk1rk2MOcaInRViZA2RDGBiYD1mPtFQ) no-repeat center;
	background-size: cover;
}

/*Contact*/
.contact {
  background-color:#29303F;
  background-size: cover;
  position: relative;
  padding: 50px;
}

.contact h1 {
  color: #ffffff; 
  font-family: 'Raleway', serif;  
  font-size: 50px; 
  font-weight: 800; 
  line-height: 62px;
  text-align: center;
  text-shadow: 2px 3px #000000;
}

#name,
#email{
  background-color: black;
  border: none;
  color: white;
  margin-bottom: 10px;
  width: 400px;
  height: 40px;
  padding: 8px;
}

#message{
  background-color: black;
  border: none;
  color: white;
  margin-bottom: 10px;
  width: 400px;
  height: 160px;
  padding: 8px;
}

/*Footer*/
.footer{
  background-color: #343436;
  height: 100px;
  padding: 30px;
}

.footer li{
  display: inline;
  margin: 30px;
}

.footer a{
  color: white;
  font-family: 'Droid serif', serif;
  text-shadow: 2px 2px black;
}

.footer a:hover{
  text-decoration: none;
}