/********************************      Basic Structure      ********************************/
html, body{
	margin:0;
	padding:0;
	outline:0;
	display:block;
	font-family:'Roboto', sans-serif;
	font-size:15px;
	background-color:#eee;
	color:#7b7b7b;
	-webkit-font-smoothing:subpixel-antialiased;
	-webkit-text-stroke:1px transparent;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-webkit-overflow-scrolling:touch;}
	
.section{
	position:relative;
	padding-top:15px;
	padding-bottom:30px;}
	
.section .section-title{
	margin-bottom:18px;}
	
.section .section-title .title-icon{
	margin-right:20px;
	color:#06A763;}
	
.section .section-title img{
	width:66px;
	padding:10px;
	box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	margin:-2px 12px 12px 12px;}


.card{
	position:relative;
	background-color:#282828;
	transition:box-shadow .25s;
	-webkit-transition:box-shadow .25s;
	border-radius:0 !important;
	margin:8px 0;}
	
.card .card-content{
	padding:40px;
	border-radius:0 0 2px 2px;}
	
.card .card-content p{
	margin:0;
	color:inherit;
	text-align:center;}	

/********************************      PRE-LOADER       ********************************/
#loading {
	background-color:#06A763;
	height:100%;
	width:100%;
	position:fixed;
	z-index:5001;
	margin-top:0;
	top:0;}
	
#loading #loading-center{
	width:100%;
	height:100%;
	position:relative;}
	
#loading #loading-center-absolute{
	position:absolute;
	left:50%;
	top:50%;
	height:200px;
	width:271px;
	margin-top:-123px;
	margin-left:-136px;}
	
#loading .text-holder{
	width:100%;
	position:absolute;
	color:#282828;
	top:62%;}
	
#loading .text-holder h2{
	padding:0;
	margin:0;
	text-shadow:2px 2px 4px rgba(0, 0, 0, 0.29);}
	
#loading .text-holder h6{
	font-size:16px;
	padding:0;
	margin:0;
	text-shadow:2px 2px 4px rgba(0, 0, 0, 0.29);}
	
#loading .box-holder{
	position:absolute;
	top:42%;
	left:45%;}
	
#loading .box-holder .load-box{
	display:inline-block;
	width:30px;
	height:30px;
	position:relative;
	border:4px solid #282828;
	top:50%;
	animation:loader 2s infinite ease;
	-webkit-animation:loader 2s infinite ease;
	box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
	
#loading .box-holder .load-box .box-inner{
	vertical-align:top;
	display:inline-block;
	width:100%;
	background-color:#262525;
	animation:loader-inner 2s infinite ease-in;
	-webkit-animation:loader-inner 2s infinite ease-in;}
	
/********************************      Home       ********************************/

#home .menu{
	position:fixed;
	left:-225px;
	width:225px;
	height:100%;
	top:0;
	z-index:10;
	text-align:left;
	background:#06A763;}

#home .menu a{
	margin-left:30px;
	margin-right:30px;
	color:#7b7b7b;
	display:block;
	font-size:12px;
	font-weight:700;
	line-height:40px;
	letter-spacing:.1em;
	text-transform:uppercase;}
	
#home .menu a:hover{color:#06A763;}

#home .menu a:active{color:#06A763;}

#home .menu i{padding:7px;}

#home .menu .menu-wrap{
	position:absolute;
	top:0;
	left:0;
	background:#262525;
	width:225px;
	height:100%;
	overflow-y:auto;
	padding-top:14px;}

#home .menu-open{left:0;}

#home .body-push{
	overflow-x:hidden;
	position:relative;
	right:0;}

#home .body-push-toright{right:225px;}

#home .body-push-toleft{right:225px;}

#home .menu, #home .body-push{transition:all .3s ease;}


#home #menuToggle{
	position:absolute;
	top:20px;
	right:-65px;
	z-index:11;
	display:block;
	text-align:center;
	font-size:14px;
	width:40px;
	height:40px;
	line-height:40px;
	cursor:pointer;
	border:none;
	background:none;
	transition:all .5s ease-in-out;}
	
#home #menuToggle:hover{
	background:rgba(0, 0, 0, 0.3);
	transition:all .5s ease-in-out;}
	
#home #menuToggle .toggle-normal{font-size:31px;}

#home #menuToggle .toggle-normal i{font-size:31px;padding:4px;color:#06A763;}

#home #menuToggle .toggle-normal .top-bar{
	position:absolute;
	right:0;
	top:-6px;
	transition:.8s;
	background-color: #333;
	    width: 35px;
    height: 1px;
	margin: 6px 0;}
	
#home #menuToggle .toggle-normal .middle-bar{
	position:absolute;
	right:0;
	top:0;
	opacity:1;
	transition:.8s;
	background-color: #333;
	    width: 35px;
    height: 1px;
	margin: 6px 0;}
	
#home #menuToggle .toggle-normal .bottom-bar{
	position:absolute;
	right:0;
	top:6px;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
	transition:.8s;
	background-color: #333;
	width: 35px;
    height:1px;
	margin: 6px 0;}
	
#home #menuToggle .top-transform{
	-webkit-transform:rotate(45deg) !important;
	transform:rotate(45deg) !important;
	-webkit-transform-origin:34% 56%;
	transform-origin:34% 56%;}
	
#home #menuToggle .middle-transform{
	opacity:0 !important;}
	
#home #menuToggle .bottom-transform{
	-webkit-transform:rotate(-45deg) !important;
	transform:rotate(-45deg) !important;
	-webkit-transform-origin:28% 43%;
	transform-origin:28% 43%;}

#home .header-background{
	position:relative;
	display:block;
	width:100%;
	height:370px;
	background:url(../images/bg-1.jpg) no-repeat;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;}	

	
#about{transition:all 1s;}
	
/********************************      v-card-holder      ********************************/	
#v-card-holder{
	overflow:visible;
	width:100%;
	height:auto;
	margin-top:-194px;}
	
#v-card-holder #v-card{
	position:relative;
	width:100%;
	height:400px;
	overflow:hidden;
	-webkit-transition:height 1s, color 1s, margin 1s;
	transition:height 1s, color 1s, margin 1s;
	z-index:1;background:#262525;
	margin:-33px 3px 0 0;}
	
#v-card-holder #v-card .info-headings{max-width:514px;}
#v-card-holder #v-card .info-headings h4{
	display:block;
	width:100%;
	font-weight:900;
	color:#7b7b7b;
	text-shadow:2px 2px 4px rgba(0, 0, 0, 0.29);}
	
#v-card-holder #v-card .info-headings h6{
	display:block;
	width:100%;
	font-weight:300;
	margin-top:-10px;
	margin-bottom:30px;
	font-size:1.2em;
	color:#7b7b7b;
	text-shadow:2px 2px 4px rgba(0, 0, 0, 0.29);}
	
#v-card-holder #v-card .infos{
	max-width:515px;
	margin-top:5%;}
	
#v-card-holder #v-card .infos .profile-list{
	list-style-type:none;
	padding-left:0%;}
	
#v-card-holder #v-card .infos .profile-list .title{
	display:block;
	float:left;
	color:#7b7b7b;
	line-height:26px;}
	
#v-card-holder #v-card .infos .profile-list .title i{font-size:23px;}

#v-card-holder #v-card .infos .profile-list .title .fa{padding-left:2px;}

#v-card-holder #v-card .infos .profile-list .content{
	display:block;
	margin-left:30px;
	font-size:15px;
	font-weight:400;
	line-height:20px;
	color:#7b7b7b;}

#v-card-holder #v-card .links{
	max-width:500px;
	margin-left:-12px;
	margin-top:12px;
	height:100%;}
	
#v-card-holder #v-card .links .social{
	margin-left:12px;
	margin-bottom:4px;}
	
#v-card-holder #v-card .links .social i{
	font-size:15px;
	vertical-align:middle;
	padding-bottom:15px;}
	
@media screen and (max-width:400px){
	#v-card-holder #v-card .links .social{margin:4px;}
}

@media screen and (max-width:295px){
	#v-card-holder #v-card .links .social{margin:1px;}
}

@media screen and (max-width:990px){
	#v-card-holder #v-card .infos{max-width:278px;}
	#v-card-holder #v-card .links{max-width:325px;}
	#v-card-holder #v-card .info-headings{max-width:270px;}
}

#v-card-holder #v-card #profile{position:absolute;right:0;z-index:1;}

#v-card-holder #v-card #profile img{width:400px;height:auto;}

#v-card-holder #v-card #profile .slant{
	top:0;
	z-index:1;
	position:absolute;
	border-style:solid;
	border-width:400px 0 0 100px;
	border-color:rgba(223, 50, 50, 0) transparent transparent #262525;}
	
#v-card-holder #v-card #profile .add-btn{
	position:absolute;
	background-color:#06A763;
	top:20%;
	right:86%;
	overflow:hidden;}
	
#v-card-holder #v-card #profile .add-btn i{font-size:35px;color:#282828;}

@media screen and (max-width:767px){
	#v-card-holder #v-card{
		position:relative;
		width:100%;
		overflow:visible;
		z-index:1;
		top:34px;}
		
	#v-card-holder #v-card #profile{
		position:absolute;
		bottom:85%;
		left:0;
		width:150px;
		height:auto;
		margin-right:auto;
		margin-left:auto;
		z-index:1;
		background-color:transparent;}
		
	#v-card-holder #v-card #profile img{width:150px;height:150px;border-radius:50%;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
	
	#v-card-holder #v-card #profile .slant{display:none;opacity:0;overflow:hidden;}
	
	#v-card-holder #v-card #profile .add-btn{display:none;}
	
	#v-card-holder #v-card .social{top:0;margin-left:5px;margin-bottom:4px;}
	
	#v-card-holder #v-card .infos{display:table;margin:0 auto;max-width:100%;padding:0;}
	
	#v-card-holder #v-card .links{display:table;max-width:100%;padding:0;margin:0 auto 9px;}

	#v-card-holder #v-card .links #first_one{
		margin-left:0;}
	
	#v-card-holder #v-card .info-headings{max-width:100%;text-align:center;margin-top:20%;}
	
	#v-card-holder #v-card .info-headings h6{margin-bottom:20px;}
	
	#v-card-holder #v-card .card-content{padding:10px;}
}


 #timeline-education{
	position:relative;}
	
#timeline-education:before{content:'';position:absolute;top:0;bottom:23px;left:50%;height:85%;width:4px;opacity:0.3;background:#06A763;}

#timeline-experience{
	position:relative;}
	
#timeline-experience:before{content:'';position:absolute;top:0;bottom:23px;left:50%;height:95%;width:4px;opacity:0.3;background:#06A763;}

@media only screen and (min-width:768px){
	#timeline-education::before{left:50%;margin-left:-2px;height:77.1%;opacity:0.4;background:#06A763;}
	#timeline-experience::before{left:19%;margin-left:-2px;height:95%;opacity:0.4;background:#06A763;}
	.timeline-block{margin:-5em 0;}
	.timeline-block .card{margin:0;}
	.timeline-block .timeline-content{width:44%;}
	.timeline-block .timeline-content .timeline-title{max-width:100%;}
	.timeline-block:nth-child(even) .timeline-content{float:right;}
	.timeline-block:nth-child(even) .timeline-content::before{top:25px;left:auto;right:101.2%;z-index:-2;}
}

.timeline-block{position:relative;}
.timeline-block::after{clear:both;content:"";display:table;}
.timeline-block:first-child{margin-top:0;}
.timeline-block:last-child{margin-bottom:0;}
.timeline-block .card-content{padding:20px;}
.timeline-block .card-content p{margin-top:13px;text-align:left;}
.timeline-block .timeline-content{position:relative;background:#ffffff;margin-right:0;z-index:1;margin-bottom:5px;border-left:5px solid #06A763;}
.timeline-block .timeline-content::before{content:'';width:67px;height:4px;position:absolute;top:26px;left:100%;z-index:-2;opacity:0.4;background:#06A763;}
.timeline-block .timeline-content::after{clear:both;content:"";display:table;}
.timeline-block .timeline-content .timeline-title{max-width:84%;font-weight:normal;}
.timeline-block .timeline-content .timeline-info h6{line-height:12px;}
.timeline-block .timeline-content .timeline-info h6 small{color:inherit;}

.section-experience .period-experience {
    background-color: #0487cc;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    left: -250px;
    margin-top: -30px;
    width: 174px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
	box-shadow: 0 0 10px rgba(0,0,0,.1), 0 0 15px rgba(0,0,0,.08);}
	
@media screen and (max-width:768px){
	.timeline-block .timeline-content:before{display:none;}
	.section-experience .experience-content:before{display:none;}
	#experience .icon-experience {display:none;}
	
	.section-experience .period-experience {
		background-color: #0487cc;
		color: #ffffff;
		display: inline-block;
		position: absolute;
		left: 30px;
		margin-top: -20px;
		width: 154px;
		padding-top: 5px;
		padding-bottom: 10px;
		text-align: center;
		box-shadow: 0 0 10px rgba(0,0,0,.1), 0 0 15px rgba(0,0,0,.08);
		height:30px;}
		
}

@media screen and (min-width:768px){
	.section-experience .all-experience {
			margin-left: 180px;
			padding-top: 45px;
			padding-left: 23px;}
}		

footer{width:100%;height:auto;color:#282828;margin-top:-18px;margin-bottom:9px;}
/********************************      Elements styling      ********************************/

#scrollup{
	color:#282828;
	height:45px;
	width:45px;
	cursor:pointer;
	font-size:28px;
	background:#72c8c5;
	border:1px solid #72c8c5;
	text-align:center;
	position:fixed;
	bottom:21px;
	right:18px;
	z-index:5;
	box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	display:none;
	transition:.3s;}