body {
	box-sizing: border-box;
	color: white;
	overflow-x: hidden;
}
hr {
	background: white;
}

/* Header */

header {
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background-image: url('../img/background.jpg');
	background-size: cover;
	background-attachment: fixed;
}
header:before {
	content: '';
	position: absolute;
	width: 100%; 
	height: 100vh;
	background-color: rgba(0,0,0,.8);
}
/*.header-content {
	font-size: 32px;
}*/
#MyNavBar {
	/*position: relative;*/
}
.welcome {
	display: flex;
	width: 50%;
	margin: 0 auto;
}




.name {
	font-size: 4rem;
}
.work {
	font-size: 2rem;
}

.line {
	background: white;
	flex: 1;
}
.welcome-text {
	flex: 1;
}
.btn {
	background: transparent;
	border-radius: 0px;
	border-color: white;
	color: white;
	transition: background .5s;
}
.btn:hover {
	background: #EE7600;
	border-radius: 0px;
	border-color: white;
	color: white;
}

.profile-image {
	border-radius: 10px;
	-webkit-box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
	box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
}

.profile-image img {
	overflow: hidden;
	width: 100%;
}

.profile-details {
	border-radius: 10px;
	-webkit-box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
	box-shadow: -2px 7px 27px -4px rgba(0,0,0,0.75);
}

.skills-section {
	background: url('../img/skills.jpg');
	background-size: cover;
	background-attachment: fixed;
}


.background-overlay {
	background-color: rgba(0,0,0,0.8);
}


/* Services */


.card {
	position: relative;
	overflow: hidden;
}

.card-secondary {
	background: orange;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	transition: left .2s;
}




@media only screen and (min-width: 768px){	
	.card:hover  .card-secondary {
		left: 0;
	}
}


  /*social icons*/

  .social-links-ul {
  	display: inline-block;
  	margin: 0 auto;
  }
  .social-links-ul .social-item {
  	list-style: none;
  	display: inline-block;
  	padding: 0;
  	margin: 0;
  }


  .social-link i {
  	font-size: 1.2rem;
  	display: inline-block;
  	padding: 14px;
  	margin: 12px;
  	border: 2px solid white;
  	border-radius: 50%;
  	transition: background, transform 1s;
  }
  .social-link:hover i {
  	background: #38A1F3;
  	transform: rotateZ(360deg);
  }



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

		.welcome {
			display: flex;
			width: 100%;
			margin: 0 auto;
		}

		.line {
			background: white;
			flex: 1;
		}
		.welcome-text {
			flex: 2;
		}


		.name {
			font-size: 2rem;
		}
		.work {
			font-size: 1rem;
		}
		.btn {
			font-size: 1rem;
		}




}