/*Media queries*/
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

html{
	background-image: url(../images/background.jpg);
	position: relative;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	font-family: 'Open Sans', sans-serif;
}

h1{
	font-weight: 100;
	letter-spacing: 1;
	font-size: 40px
}

p{
	font-weight: 100;
    letter-spacing: 1;
}

body{
	margin-top: 0px;
	margin: 0px;
	padding-bottom: 40px;
}

a{
	color: white;
}

.projects-box{
	width: 700px;
	height: 700px;
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	padding: 20px;
	color: white;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
	text-align: center;
}

.about-box{
	width: 450px;
	height: 450px;
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	padding: 20px;
	color: white;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
}

.education-body{
	width: 700px;
	height: 750px;
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	padding: 20px;
	color: white;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
	text-align: left;
}

.experience-body{
	width: 700px;
	height: 700px;
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	padding: 20px;
	color: white;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 60px;
	text-align: left;
}

.prof-box{
	width: 700px;
	height: 600px;
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	background-color: rgba(0,0,0,0.4);
	padding: 40px;
	color: white;
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 60px;
	text-align: center;
}

.contact-body{
	width: 400px;
	height: 200px;
	background-color: rgba(0,0,0,0.4);
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	padding: 40px;
	color: white;
	margin: 0 auto;
	margin-bottom: 60px;
	text-align: left;
}

.prof-pic{
	margin-top: 70px;
	border-radius: 50%;
	height: 300px;
	width: 300px;
}

.project-images{
	height: 20%;
	width: 20%;
	margin: 0 auto;
	margin-left: 20px;
}

.social-icons{
	font-size: 50px;
}

.social-icons a{
	color: white;
	margin-right: 15px;
}

.line-break{
	width: 350px;
	border-top: 1px solid white;
	margin: 0 auto;
}

.nav-bar{
	background-color: #333;
	overflow: hidden;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
}

.nav-bar a{
	float: left;
  	display: block;
  	color: #f2f2f2;
  	text-align: center;
  	font-family: Calibri;
  	padding: 14px 30px;
  	text-decoration: none;
  	font-size: 17px;
}

.footer{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: rgba(0,0,0,0.4);
	color: white;
	text-align: left;
	height: 10px;
	font-size: 10px;
	margin-top: 40px;
	-webkit-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	-moz-box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
	box-shadow: 14px 12px 32px 4px rgba(107,105,107,1);
}

.nav-bar a:hover{
	background-color: #ddd;
	color: black;
}