body{
	background-color:  #F5F5F5;
	max-width: 100vw;
	overflow-x: hidden;
}
a{

  color:inherit;
  text-decoration: none;
}

.title{
	font-family: 'Bree Serif', serif;
}

.home-button{
	position: fixed;
	z-index: 50;
	width: 50px;
	padding-top: 5px;
	color:black;
	padding-bottom: 5px;
	text-align: center;
	background-color: #FFC107 !important;
	box-shadow: 0px 3px 5px #9e9e9e;

	margin-top:50vh;
	display: none;
}



.navbar{
	background-color:  #00796B !important;
	z-index: 15;
}
.navbar>.navbar-nav>.nav-item>a{

	color: white !important;
}

.icon{
	height:10px;
	width: 10px;
}


.button-left, .button-right{
	display: none;
}

.intro {
	text-align: center;
	margin-top:50px;
	padding-top : 20px;
	background-color:#009688;
	color:white;
	height:30vh;
	z-index: 1 !important;
	position: relative;
	box-shadow: 0px 3px 5px #9e9e9e;
}
	
#profpict{
	margin-top:25px;
	width: 300px;
	border-radius : 1000px;
	border-color:white;
	border-width: 7px;
	border-style: solid;
	box-shadow: 0px 2px 5px #9e9e9e;
}


.aboutme{
	z-index: -1;
}

.box{
	background-color:white;
	position: relative;
	margin-top:15px;
	box-shadow: 0px 2px 5px #9e9e9e;
}


.buttonBackEdu{
	z-index: 5;
	right: 0;
	position: fixed !important;
	display:none;
	width: 70px !important;
	color:white;
	background-color: #FFA000 !important;
}

.bigButtonEdu{
	background-color: #FFA000 !important;
	z-index: 5;
}

.bigButtonSkill{
	background-color: #FFA000 !important;
	z-index: 5;
}


.aboutme-content{
	padding-top:170px;

/*
	padding-left: 2vw;
	padding-right: 2vw;*/
	padding-bottom : 25px;
}

.icon{
	width: 30px;
	height: 30px !important;
}

hr{
	border-width: 1px;
	border-color: #FAFAFA;
	border-style: solid;
	width: 100%;
	margin-left :  25px;
	margin-right :  25px;
}


h4, td{
	font-family: 'Ubuntu', sans-serif;
}

td{
	padding-left :10px;
	padding-right : 10px;
}

.details{
	padding-left : 2vw;
	padding-right : 2vw;
	padding-top:10px;
	padding-bottom:10px;
}


.greetings{
	/*padding-top:150px;*/
	padding-left: 2vw;
	padding-right: 2vw;
	padding-bottom:20px;
}

.detail>table{
	margin-top:20px;
	margin-bottom:20px;
}

.detail{
	padding-top:25px;
	padding-bottom : 25px;
	margin-bottom:50px;
}

td{
	padding-top:5px;
	padding-bottom:5px;
}



.education{
	padding-top:60px;
	width: 100vw;
	position:fixed;
	left:-105vw;
	height : 100vh;
	overflow-y: scroll;
	overflow-x : hidden;
	top:0px;
	z-index: 7;
	background-color: #F5F5F5 !important;
}

.educationContent{
	max-height: 100vh;
	overflow-y: scroll;
	padding-bottom: 7vh;
}

.edu-detail{
	padding-top:2px;
	font-size: 12pt;
}



/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #424242;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.containers {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.containers::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -15px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}
/*timeline done*/

.timeline-title{
	text-align: center;
}


.skill{
/*	padding-top:50px;*/
	width: 100vw;
	position:fixed;
	right:-100vw;
	top:0px;
	padding-bottom:50px;
	background-color: #F5F5F5 !important;
}
.skill-icon{
	text-align: center;
}
.skill-icon>img{
	margin-top:20px;
	width: 80px;
}

.skill-content{
	margin-top:20px;
	background-color: white;
	box-shadow: 0px 2px 5px #9e9e9e;
	padding-bottom : 30px;
}

.skill-box{
	padding-top:35px;
	padding-bottom:35px;
}

.framework-title{
	text-align: right;
}

.portfolio{
	padding-top:5px;
}

.images{
	height: 350px;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.box-image{
	padding-right: 0px;
	padding-left : 0px;
}

.images-detail{
	padding-top: 10px;
	padding-bottom:10px;
}

.android{
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #E0E0E0;
}

.btn{
	border-radius: 0px;
	background-color: #FFC107 !important;

	font-family: 'Ubuntu', sans-serif;
	box-shadow: 0px 1px 3px #9e9e9e;
	position: relative;
}

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) and ( max-width: 767px) {

	.btn-blocks{
		display: none;
	}
	.nav-bar-resume{
		display: none;
	}
	.home-button{
		display: none !important;
	}
	.icon{
		height:5px;
		
	}

		
	#profpict{
		width: 150px;
		margin-top:10px;
		border-width: 3px;
	}
	.intro> h1{
		font-size: 30pt;
	}
	h4{
		font-size : 15pt;
	}

	.greetings{
		padding-top:110px;
		padding-bottom:20px;
	}
	.email{
		font-size: 10pt;
	}


	/* Full-width containers */
	.containers {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.containers::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.left::after, .right::after {
		left: 15px;
	}

	/* Make all right containers behave like the left ones */
	.right {
		left: 0%;
	}

	.education{


		width: 100vw;
	}
	.timeline-title{
		text-align: left;
		font-size: 25pt;
		padding-left : 10px;
	}
	
	.timeline::after {
		left: 31px;
	}


	.skill{
		padding-top:50px;
		z-index: 2;
		width: 100vw;
		position:fixed;
		right:-105vw;
		top:0px;
		background-color: #F5F5F5 !important;
	}

	.skill-content{
		background-color: white;
		box-shadow: 0px 2px 5px #9e9e9e;
		padding-bottom : 0px;
	}

	.skill-box{
		padding-top:35px;
		padding-bottom:35px;
	}

	.framework-title{
		text-align: left;
	}


}


/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) and ( max-width: 1023px) {

	.btn-blocks{
		display: none;
	}
}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px)  {
	
	.greetings{
		padding-top:30vh !important;
	}

	.skill{
		margin-top: 35vh;
		padding-top : 25vh;
	}
	.nav-bar-edu{
		display: none !important;
	}
	.nav-bar-skill{
		display: none !important;
	}

}   
@media only screen and (min-height: 850px)  {
	
	.skill{
		margin-top: 35vh;
		padding-top : 15vh;
	}

	.greetings{
		padding-top:20vh !important;
	}

}
@media only screen and (min-height: 1366px)  {
	.greetings{
		padding-top : 2vh !important;
	}

	.skill{
		margin-top:30vh;
		background-color: #F5F5F5 !important;
	}
}