html, body {
	 height: 100%;
	 box-sizing: border-box;
}
 body {
	 color: #555;
	 color: #7c8891;
	 font: 16px/22px "Proxima Nova", sans-serif;
	 background: #ebedee;
	 padding: 50px;
	 overflow: hidden;

	 background: rgba(0, 0, 0, .5) url(background.jpg) no-repeat top;
	 background-size: cover;
}
 @media (max-width: 768px) {
	 body {
		 padding: 30px;
	}
}
 @media (max-width: 420px) {
	 body {
		 padding: 10px;
	}
}
 h1, h2 {
	 margin-top: 10px;
}
 h1 {
	 line-height: 30px;
	 color: #5e6f7c;
}
 .wrapper {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
}
 @media (min-width: 768px) {
	 .wrapper {
		 height: 100%;
	}
}
 .container {
	 opacity: 0;
	 transition: transform 1s ease, opacity 1s ease;
	 transform: translateY(-40px);
	 position: relative;
	 box-sizing: border-box;
	 width: 80%;
	 background: #fff;
	 border-radius: 10px;
	 overflow: hidden;
	 max-width: 700px;
	 box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}
 .container.fadeIn {
	 opacity: 1;
	 transform: translateY(0);
}
 @media (max-width: 768px) {
	 .container {
		 width: 100%;
		 min-width: 350px;
	}
}
 .container > div {
	 box-sizing: border-box;
	 padding: 50px 30px;
}
 @media (max-width: 420px) {
	 .container > div {
		 padding: 40px 30px !important;
	}
}
 .profile {
	 position: absolute;
	 text-align: center;
	 width: 200px;
	 color: #fff;
	 background: rgba(0, 0, 0, .5) url(bkg-mario.jpg) no-repeat top;
	 background-size: cover;
	 height: 100%;
	 text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
 .profile .meta {
	 position: relative;
	 z-index: 1;
}
 .profile .overlay {
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 width: 100%;
	 height: 100%;
	 background: linear-gradient(rgba(0, 0, 0, .3), transparent);
}
 .profile .avatar {
	 width: 50%;
	 border-radius: 50%;
	 overflow: hidden;
	 box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
 .profile h2 {
	 font-size: 22px;
	 margin-bottom: 2px;
}
 .profile .position {
	 font-size: 13px;
}
 .profile .social {
	 padding-top: 15px;
}
 .profile .social i {
	 margin: 0 5px;
}
 .profile a {
	 color: #fff;
}
 .portfolio {
	 margin-left: 200px;
	 padding: 50px !important;
}
 @media (max-width: 670px) {
	 .profile {
		 position: relative;
		 width: 100%;
		 background-size: cover;
	}
	 .profile h2 {
		 font-size: 28px;
		 margin-bottom: 5px;
	}
	 .avatar {
		 width: 80px !important;
	}
	 .portfolio {
		 margin: 0;
	}
}
 .footer {
	 color: #cfd4d7;
	 padding: 20px 0;
}
 .footer .fa {
	 font-size: 12px;
	 padding: 0 5px;
}
 .text-center {
	 text-align: center;
}
 .label {
	 display: normal;
	 color: #f9f9fa;
	 font-size: 11px;
	 padding: 4px 8px;
	 border-radius: 3px;
	 background: #dadee0;
}