/* HEADER STYLES */

.hero {
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	text-align: center;
	color: white;
	background-image: linear-gradient(rgba(0, 0, 0, 0.144), rgba(0, 0, 0, 0.37)), url('images/toa-heftiba-417510-unsplash.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	min-height: 500px;
}

.hero .banner-text h1 {
	color: #fff;
	text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

.hero .banner-text h5 {
	color: #fff;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}

.hero .social {
	font-size: 1.6em;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
}

.hero .social li {
	display: inline-block;
	margin: 0.3em;
 align-self: self-end;
}

.hero .social li a { color: #fff; }
.hero .social li a:hover { color: #f26419; }

.hero .scrolldown {
	margin-top: 5em;
	padding-bottom: 1em;
}
.hero .scrolldown a {
	color: #fff;
	width: 2em;
	font-size: 2.6em;
	border-radius: 100%;
}

.hero .scrolldown a:hover {
	color: #ff3c38;
}
.hero .scrolldown img {
	max-width: 1.5em;
}

	/* Navbar */

#navbar {
  font: bold 0.9em 'Cabin', sans-serif;
	text-transform: uppercase;
	justify-content: center;
	display: block;
	flex-direction: row;
	width: 100%;
	position: fixed;
	top: 0;
  z-index: 100;
  line-height: 1.6em;
	min-height: 3em;
  overflow: hidden;
}

.opaque {
	background-color: #f26419;

}  

#navbar ul {
	width: auto;
	text-align: center;
	margin-top: 0.9em;
}

#navbar li {
	position: relative;
	list-style: none;
	padding-right: 1.2em;
	list-style: none;
	display: inline-block;
}

#navItems li a, .menu {
 	text-decoration: none;
 	text-align: left;
 	color: #fff;
}

#navbar .active, li a:hover  {
	color: #32021f;
}

/*Responsive  */


/*Style for menu links*/
#navbar li a {
	display:block;
	text-align: center;
	text-decoration: none;
  padding: 10px 0;  
transition: all 0.4s ease 0s;
}

/*Hover state for top level links*/
/* #navbar li:hover a {
	color: #32021f;
} */

/*Style for dropdown links*/
#navbar li:hover ul a {
	background: #f3f3f3;
	color: #32021f;
	height: 40px;
	line-height: 40px;
}

/*Hide dropdown links until they are needed*/
#navbar li ul {
	display: none;
}

/*Make dropdown links vertical*/
#navbar li ul li {
	display: block;
	float: none;
}


/*Style 'show menu' label button and hide it by default*/
#navbar .show-menu {
	text-decoration: none;
	color: #fff;
	background: #f26419;
	text-align: center;
	padding: 10px 15px;
	display: none;
  cursor: pointer;
  text-transform: uppercase;
}

#navbar .show-menu span {
   padding-left: 35px;
}

/*Hide checkbox*/
#navbar input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#navbar input[type=checkbox]:checked ~ .main-nav{
    display: block;
}

@media screen and (max-width : 800px){
  #navbar .lines {
    border-bottom: 1em double #ffffff; 
    border-top: 0.3em solid #f8f8f8; 
    content:"";
    height: 5px; 
    width:20px;
    padding-right:15px;
  float: right;
}

 #navbar .opaque {
	 display: none;
	 visibility: hidden;
 }
	/*Make dropdown links appear inline*/
	#navbar ul {
		position: static;
		display: none;
		background-color: #f26419;
	}
	/*Create vertical spacing*/
	#navbar li {
		margin-bottom: 0.1em;
	}
	/*Make all menu links full width*/
	#navbar ul li, #navbar li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	#navbar .show-menu {
		display:block;
	}
}


/* ABOUT SECTION  */
#about {
	background: #E8A220;
	padding-top: 3em;
	padding-bottom: 3em;
	scroll-behavior: smooth;
}
#about a, #about a:visited  { 
	color: #fff; 
}

#about .description {
	flex-direction: column
}

#about h5 {
	color: #32021f;
}

#about p {
	color: #32021f;
}

#about .profile-pic {
	width: 9em;
	border-radius: 100%;
}

#about .download {
	padding-top: 0.8em;
	font-weight: bold;
}

#about .download .button {
	background: #32021f;
}

#about .download .button:hover {
	background: #ff3c38;
	color: #fff;
}

#about .download .button i {
	margin-right: 15px;
	font-size: 1em;
}

/* Skills Section */

#skills {
	background: #ebeeee;
	padding-top: 3em;
	padding-bottom: 3em;
}

#skills .row {
	align-items: baseline;
}

#skills .item {
	padding: 2.5em;
	text-align: center;
}

#skills .icon{
	position: relative;
	width: 4em;
	display: block;
	margin: auto;
	padding-bottom: 1em;
}
#skills ul {
	padding-top: 1em;
}

/* Resume Section */
#resume {
	background: #fff;
	padding-top: 3em;
	padding-bottom: 3em;
	overflow: hidden;
}

#resume a, #resume a:visited  { 
	text-decoration: none; 
}

#resume a:hover, #resume a:focus { 
	color: #f26419; 
}

#resume h5 span {
	border-bottom: 0.1em solid #E8A220;
	padding-bottom: 6px;
}

#resume .header-col { 
	padding-top: 9px; 
}
#resume .main-col { 
	padding-right: 10%; 
}

.work {
	margin-bottom: 48px;
	padding-bottom: 24px;
	border-bottom: 0.02em solid #E8E8E8;
}

.description{
	flex-direction: column;
}
.education {
	margin-bottom: 8px;
}
#resume .info {
	font: 'Cabin', serif;
	color: #6E7881;
}
#resume .info span {
	margin-right: 0.2em;
	margin-left: 0.2;
}
#resume .date {
	font: 15px/24px 'opensans-regular', sans-serif;
	margin-top: 6px;
}

/* Portfolio Section */

#portfolio {
	background: #ebeeee;
	padding-top: 3em;
	padding-bottom: 3em;
}

#portfolio h5 {
	text-align: center;
	padding-bottom: 1em;
}

#portfolio .portfolio-item-meta h6 {
	text-align: left;
	color: #95A3A3;
}

#portfolio .row {
	flex-flow: wrap;

}

.portfolio-item .item-wrap {
	background: #fff;
	overflow: hidden;
	position: relative;
	margin: 0.6em;
	border-radius: 3px;

	-webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.portfolio-item .item-wrap a {
	display: block;
	cursor: pointer;
}

.portfolio-item .item-wrap .overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
 opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
	-webkit-transition: opacity 0.3s ease-in-out;
 transition: opacity 0.3s ease-in-out;
	background-color: #313131;
}

.portfolio-item .item-wrap .link-icon {
	color: #fff;
	height: 2em;
	width: 2em;
	font-size: 2em;
	line-height: 2em;
	text-align: center;
	opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
	-webkit-transition: opacity 0.3s ease-in-out;
 transition: opacity 0.3s ease-in-out;
	position: absolute;
	top: 40%;
	left: 37%;
}

.portfolio-item .item-wrap img {
	vertical-align: bottom;
}

.portfolio-item .portfolio-item-meta { 
	padding: 1.2em 
}

.portfolio-item .portfolio-item-meta h6 {
	color: #fff;
	line-height: 1.5em;
	margin-bottom: 0.5em;
}

.portfolio-item .portfolio-item-meta p {
	font-size: 0.9em;
	color: #c6c7c7;
	line-height: 1em;
}

	/* on hover */
.portfolio-item:hover .overlay {
 opacity: 1;
 -moz-opacity: 1;
 filter:alpha(opacity=100);
}

.portfolio-item:hover .link-icon {
	opacity: 1;
 -moz-opacity: 1;
 filter:alpha(opacity=100);
}
.categories {
	margin-left: 1.5em;
	font: 0.8em 'Cabin', sans-serif;
	color: #c6c7c7;
	text-transform: uppercase;
	text-align: left;
	position: absolute;
	bottom: 0;
}

/* Contact Section */

#contact {
	background-color: #E8A220;
	padding-top: 3em;
	padding-bottom: 3em;
}

#contact h5 {
	color: #32021f;
}

#contact .row {
	justify-content: space-evenly;
	align-items: flex-end;
}

#contact .row i {
	font-size: 5em;
	color: #f26419;
	padding-bottom: 0.1em;
}

#contact .row i:hover {
	color: #ff3c38
}

/* Footer */

footer {
	background-color: #313131 ;
	padding-top: 2em;
	padding-bottom: 1em;
}

footer a:hover {
	color: #ff3c38;
}

footer .row {
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

footer p, footer a, footer a:visited {
	color: #32021f;
	text-decoration: none
}
footer p a:hover {
	color:#E8A220;
}

	/* social links */
footer .social-links {
	padding: 0;
	font-size: 2em;
}

footer .social-links li {
	 display: inline-block;
	 margin: 0.5em;
}

footer .social-links a:hover {
	color: #E8A220;
}

	/* Go To Top Button */
#go-top i {
font-size : 2.6em;
}