/************************
	  General  
*************************/ 
body {
	font-family: Tahoma, sans-serif;
	font-weight:300; 
	display:flex;
	flex-direction:column; 
	 overflow-x: hidden;
}


/************************
	  Navigation
*************************/ 
#mainNav{
	width:100%; 
	background-color:#000; 
}

#navLogo {
	color:#fff; 
	width:100%;
	font-size:2.1em;
	margin-left:1px;
	padding-left:15px; 
	text-align:center; 
	letter-spacing:2px; 
}

#navLink li a {
	color:#fff; 
	font-size:1.5em; 
	width:100%; 
	margin-right:35px; 
	text-align:center; 
}

#navLink li a:hover , #navLink li a:focus{
	color:#000; 
	background-color:orange; 
	font-weight:bold; 
}

#navMenuButton {
	background-color:#000; 
	color:#fff;
	border:1px solid #fff; 
}
#navMenuButton:hover,
#navMenuButton:focus {
  background-color: orange;
  color: #000;
  border-color: orange;
  font-weight:bold; 
}

/************************
	  Header - Intro
*************************/
#intro {
	width:100%; 
	background-color:#000080;
}
#intro .container {
  padding-top: 100px;
  padding-bottom: 50px;
}

#intro h2,   #intro p {
	color:#fff; 
}
#intro h2 {
	text-align:center; 
	font-size:133%; 
	letter-spacing:1.5px; 
	font-weight:bold; 
}
#intro  p {
	font-size:115%;  
	padding-top:20px; 
}

#intro_pic {
	width:50%;	
	margin: 0 auto;
	margin-top:35px; 
	border:3.5px solid #efefef; 
}

/************************
	  About
*************************/
#about {
	width:100%; 
	background-color:#efefef;
}
#about .container {
  padding-top: 100px;
  padding-bottom: 50px;
} 

#about h2, #about p {
	color:#000; 
}
#about h2 {
	text-align:center; 
	font-size:140%; 
	letter-spacing:3px;
	font-weight:bold; 	
}
#about p {
	font-size:115%;  
	padding-top:20px; 
}

#about_pic {
	width:70%;	
	margin: 0 auto;
	margin-top:35px; 
	border:3.5px solid #000080; 
}

/************************
	  Portfolio
*************************/ 
#portfolio {
	width:100%; 
	background-color:#000080;
}
#portfolio .container {
  padding-top: 100px;
  padding-bottom: 50px;
}

#portfolio h2,   #portfolio p {
	color:#fff; 
}
#portfolio h2 {
	text-align:center; 
	font-size:140%;
	letter-spacing:3px;
	font-weight:bold;  	
}
#portfolio  p {
	font-size:115%;  
	padding-top:20px; 
}

#github_text_link {
	font-size:135%;
	color:#fff; 
	font-weight:bold; 
	text-decoration:none; 
}

#github_text_link:hover {
	color:orange; 
}
#resumeButton {
	background-color:#efefef;
	color: #000; 
	padding:15px 10px; 
	text-align:center;
	display:inline-block; 
	font-size:125%; 
	font-weight:bold;
	margin: 0 auto;
	cursor:pointer;
	border:2.5px solid #000; 
	width:100%;
	text-decoration:none; 
	
}

#resumeButton:hover {
	background-color:orange; 
	font-weight:bold; 
	color:#000;
}

#port_pic {
	width:72%;	
	margin: 0 auto;
	margin-top:35px; 
	border:3.5px solid #efefef; 
}

/************************
	  Contact 
*************************/ 
#contact{
	width:100%; 
	background-color:#efefef;
	margin:0 auto; 
}
#contact .container {
  padding-top: 100px;
  padding-bottom: 50px;
} 

#contact h2 {
	margin:0 auto;
	text-align:center;
	font-size:140%; 
	letter-spacing:3px;
	font-weight:bold; 	
}

#contact p {
	margin:0 auto;
	color:#000;
	font-size:100%;
	padding: 0 auto; 
	margin-top: 30px;
	margin-bottom: 30px; 	
	margin-left:15%; 
	width:90%;
	font-weight:bold; 
}

#contact_intro {
	width:100%; 
	color:#fff; 
	margin:0 auto; 
}

#contact_form {
	width:100%; 
	margin:0 auto;
}

#contact_form form {
	margin: 0 auto; 
	padding:20px;
	margin-left:15%; 
}
#contact_form h4 {
	margin: 0 auto; 
	padding:5px; 
	color:#000;
	font-weight:bold; 
	text-align:left;
	font-size:120%;
	letter-spacing:1.5px; 	
}

input[type=text],select, textarea{
	width:80%; 
	padding: 10px; 
	margin: 0 auto; 
	display:inline-block; 
	border-radius:5px; 
	border: 1.5px solid #000080; 
	
}

.submit {
	background-color:#000080;
	color: #fff; 
	padding:15px 10px; 
	text-align:center;
	display:inline-block; 
	font-size:195%; 
	font-weight:bold;
	margin: 0 auto;
	cursor:pointer;
	border:2.5px solid #000; 
	width:80%; 
	border-radius:48px;
	-moz-border-radius: 48px; 
	-webkit-border-radius: 48px;
	letter-spacing:5px; 
}

.submit:hover {
	background-color:orange; 
	font-weight:bold; 
	color:#000;
}
.btn-outline {
  color: white;
  font-size: 20px;
  border: solid 2px white;
  background: transparent;
  transition: all 0.3s ease-in-out;
  margin-top: 15px;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
  color: #000080;
  background: white;
  border: solid 2px white;
}
.btn-primary {
  color: white;
  background-color: #000080;
  border-color: #000080;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: white;
  background-color: #1a242f;
  border-color: #161f29;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #000080;
  border-color: #000080;
}
.btn-primary .badge {
  color: #000080;
  background-color: white;
}
.btn-success {
  color: white;
  background-color: #000080;
  border-color: #000080;
  font-weight: 700;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: white;
  background-color: #ffcc00;
  border-color: #000080;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: orange;
  border-color: orange;
}
/************************
	  Footer
*************************/  
#footer{
	width:100%; 
	padding: 15px 0 ; 
	background-color:#000;
	color:white; 
}

#socialMedia li a{
	color:#fff; 
}

#socialMedia li a:hover {
	color:orange; 
}

/************************
	  Blog
*************************/  
/* introduction same as in index.php */
#intro_blog {
	width:100%; 
	background-color:#000080;
}
#jumbotron.container {
  padding-top: 100px;
}


#jumbotron{
  display:flex; 
  align-items:center; 
  background-image: url("../img/shore.jpg"); 
  background-size:cover; 
  background-position: 0% 25%; 
  background-repeat:no-repeat; 
  color:#fff; 
  width:100%;
  height:600px;
  text-shadow: 3.5px 2px 3.5px #000; 
  overflow:hidden;
  margin-bottom:0px; 
}

#jumbotron h2 {
	text-align:center; 
	font-size:245%; 
	letter-spacing:1.5px; 
	font-weight:bold; 
}

#intro_blog_pic {
	width:38%;
	height:40%; 
	margin: 0 auto;
	margin-top:112px; 
	border:3.5px solid #efefef; 
} 

#post_body_strip1{
	width:100%; 
	background-color:#efefef;
}
#post_body_strip1 .container {
  padding-top: 100px;
  padding-bottom: 50px;
}

#post_body_strip2 {
	width:100%; 
	background-color:#000080;
}

#post_body_strip2 .container {
  padding-top: 100px;
  padding-bottom: 50px;
}

#post_space {
	background-color:#fff; 
	color:#000;
	padding:20px; 
	border:5px solid orange; 
}

@media only screen and (max-width:500px) and (orientation:portrait){
	
#intro_blog_pic {
		margin-top:200px; 
	}
}