*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
   }
  
  html
  {
	  font-size:100%;
  }
  
  body
  {
	  -webkit-font-smoothing:antialiased;
	  font-family:Lora, serif;
	  font-size:18px;
	  font-weight:400;
	  line-height:1.4;
	  text-rendering:optimizeLegibility;
  }
  
  .skill-set li:hover
  {
	  background:rgb(248, 248, 154);
	  color: black;
  }
  
  h1
  {
	  color: rgba(155, 153, 153, 0.75);
  }
  .name-text h1 {
	color:white;
  }
  
  .wrapper
  {
	  height:100%;
  }
  
  .left
  {
	  background-color: rgb(24, 24, 24);
	  height: 100%;
	  margin-left:-1px;
	  min-width:256px;
	  position:fixed;
	  width:33.33%;
	
  }

  .foto {
	  position:absolute;
	  text-align: center;
	  align-items: center;
  }

  .img_dim {
	position: relative;
	margin-top: 15%;
	width: 70%;
	height: 30%;
	border-radius: 100%;
	margin-bottom: 10%;
  }

  
  .right
  {
	  background-color: black;
	  float:right;
	  height:100%;
	  position:relative;
	  width:66.66%;
  }
  
  
  .name-hero
  {
	  bottom:0;
	  height:290px;
	  left:0;
	  margin:auto;
	  position:relative;
	  right:0;
	  top:0;
	  width:85%;
  }
  
  
  .name-hero h1
  {
	  font-family:Open Sans, sans-serif;
	  font-size:1.5em;
	  text-align:center;
	  font-size: 48px;
  }
  
  .name-hero h1 em
  {
	  color: yellow;
	  font-style:normal;
	  font-weight:700;
  }
  
  .name-hero p
  {
	  color:rgb(248, 248, 154);
	  font-size:.75em;
	  line-height:1.5;
	  margin:0 8px 0 0;
	  text-align:center;
	  font-size: 25px;
  }
  
  .name-hero .name-text
  {
	  margin:0 auto;
	  width:85%;
  }

  .button-cv
  {
	position: relative;
	padding:1em;
	margin:0 auto;
	max-width:975px;
	text-align:right;
  }
  
  .inner
  {
	position: relative;
	  margin:0 auto;
	  max-width:975px;
	  
  }
  
  .inner h1
  {
	  font-size:1.75em;
  }
  
  .inner p
  {
	  color:white;
	  font-size: 20px;
  }
  
  .inner p em
  {
	  color:rgb(153, 153, 153);
	  font-style:normal;
  }

  .inner span {
	margin-left: 4%;
	color: rgb(199, 199, 199);
  }
  
	.inner section:not(:last-of-type) 
	{
		margin: 100px 30px;
	}

	.inner section:last-of-type 
	{
		margin: 0 30px;
	}




  
  ul
  {
	  list-style-type:none;
	  margin-top:-10px;
	  max-width:570px;
	  padding:0;
  }
  
  .skill-set li
  {
	  background:rgba(110, 109, 109, 0.75);
	  border-radius:5px;
	  color:#FFF;
	  display:inline-block;
	  list-style:none;
	  margin:15px 15px 0 0;
	  padding:10px;
	  text-align:justify;
  }
  
  
  @media screen and (max-width: 48em) {
	  .right,.left
	  {
		float:none;
	  	position:relative !important;
		width:100%;
	  	min-height:800px;
	  	min-width: 300px;
	  }
	  .left {
		margin-left: 0px;
	  }
	  .name-text p {
		font-size: 18px;
	  }
	  .name-text h1 {
		font-size: 48px;
	  }
	  .inner span {
		margin-left: 5%;
	  }
	  
	.handmade {
		text-align:center !important;
		margin-top:0px !important;
	} 
	}
  
  @media screen and (max-width: 75em) {
	  body
  { font-size:16px;}
  
  .name-text p {
	font-size: 18px;
  }
  .name-text h1 {
	font-size: 40px;
  }
  .inner span {
	margin-left: 5%;
  }
  }
  
  @media screen and (max-width: 60em) {
	  body
  { font-size:14px;}
  }
  
  .clearfix:after {
	 content: " "; /* Older browser do not support empty content */
	 visibility: hidden;
	 display: block;
	 height: 0;
	 clear: both;
  }
  .handmade {
	text-align:right;
  }
  .handmade em {
	font-family: 'Shadows Into Light', cursive;
	font-size: 1.25em;
	margin-left:5px;
  }
  





.download {
	padding: 1rem;
	background-color: yellow;
	color: black;
	border-radius: 20px;
	cursor: pointer;
}

.first_row {
	animation: showText 1.5s 1 forwards ease-in;
	color: yellow;
}

.second_row {
	animation: showText 2.5s 1 forwards ease-in;
	color: white;
}

@keyframes showText {
	0% {
		transform: translateY(100%);
		opacity: 0;
   }
	50% {
		opacity: 0.4;
   }
	100% {
		transform: translateY(0%);
		opacity: 1;
   }
}


.button-color2 {
	text-decoration: none;
	font-size: 20px;
	color: white;
	z-index: 1;
  }
.paper2 {
	text-decoration: none;
	color: rgb(199, 199, 199);
}