@font-face {
  font-family: roboto-bold;
  src: url("../font/Roboto-Bold.ttf");
}

@font-face {
  font-family: roboto-regular;
  src: url("../font/Roboto-Regular.ttf");
}

BODY{
	padding:0px;
	margin:0px;
	text-align:center;
	background-color:#f7f9fd;
}

.header-menu{
	display:none;
}

.normal-words{
	font-family:roboto-regular;
	font-size:17px;
	font-weight:normal;
}

.email-button{
	border:1px solid #222222;
	background-color:transparent;
	font-family:roboto-regular;
	font-weight:normal;
	color:#222222;
	font-size:24px;
	padding-left:40px;
	padding-right:40px;
	padding-top:15px;
	padding-bottom:15px;
}



.simage{
	width: 130px;
	border-radius: 70px;
	border:5px solid #333333;
	
}



.header-span{
	cursor:pointer;
	padding-left:10px;
	padding-right:10px;
	color:#C5C6D0;
}

.header-menu-item{
	cursor:pointer;
	padding-left:10px;
	padding-right:10px;
	margin-top:25px;
	margin-bottom:25px;
	color:#C5C6D0;
	font-size:24px;
}

.footer{
	font-family: roboto-bold;
	color:#C5C6D0;
	width:100%;
	padding-top:20px;
	padding-bottom:10px;
	margin-top:0px;
	margin-bottom:0px;
	background-color:#222222;
}	

.social-icon{
	width:50px;
	margin-left:5px;
	margin-right:5px;
	cursor:pointer;
}

/***
CONTENT 
**/
.content-intro{
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
	font-family:roboto-bold;
	font-size:30px;
	color:#333333;
}

.content-about{
	margin-left:15%;
	margin-right:15%;
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
	font-family:roboto-bold;
	font-size:30px;
	color:#333333;
}
.content-project{
	padding-top:50px;
	text-align:center;
	font-family:roboto-bold;
	font-size:30px;
	color:#333333;
	margin-left:15%;
	margin-right:15%;
}

.content-contact{
	margin-left:15%;
	margin-right:15%;
	padding-top:15px;
	padding-bottom:15px;
	text-align:center;
	font-family:roboto-bold;
	font-size:30px;
	color:#333333;
}

.content-tech{
	font-size:24px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.content-portcontainer{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	min-height: 0;
	min-width: 0;
}

.content-portfolio{
	margin:5px;
	width:97%;
	font-family:roboto-regular;
	background-color:#333333;
	border: 0px;
	font-size: 30px;
	text-align: center;
	color:#C5C6D0;
	min-height: 0;
	min-width: 0;
}

.content-portfolio-header{
	background-color:#222222;
	font-size:18px;
	padding:10px;
	color:#C5C6D0;
	text-align:center;
	font-weight:bold;
}

.content-portfolio-body{
	font-size:17px;
	font-weight:normal;
	padding:10px;
	
}

.content-project-app{
	width:100%;
	margin:5px;
	border-radius:15px;
	background-color:#333333;
}

.content-project-app img{
	margin:10px;
	border-radius:20px;
	
}

.app-icon{
	width:105px;
	height:105px;
}

.auto-type, .name-type{
	color:#0077B6;
}

.content-desc{
	padding-top:50px;
	padding-bottom:15px;
}

.content-project-container{
	width:100%;
	display:block;
}

.content-items{
	width:25%;
	float:left;
	display:block;
	padding-top:5px;
	padding-bottom:5px;
}

.content-items img{
	width:200px;
	border-radius:20px;
}

.tech-icon{
	width:100px;
	height:100px;
}

.app-icon{
	width:100px;
	height:100px;
}

/*************************************
CODERS RANK
**************************************/
codersrank-skills-chart {
  --svg-height:250px;
}

codersrank-summary {
  --name-font-size: 20px;
  --header-bg-color: #333333;
  --header-text-color : #C5C6D0;
  --badge-text-color : #C5C6D0;
  --badge-bg-color : #222222;
}

/********
** WAVES 
**/
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

/**** 
SIZES
***/
@media only screen and (min-width:768px) {
    .header-large{
		position: fixed;
		top: 0;
		width: 100%;
		padding-top:5px;
		padding-bottom:5px;
		height: 40px;
		z-index: 999;
		font-family: roboto-bold;
		color:#C5C6D0;
		background-color:#222222;
		display: flex;
		justify-content: center;
		display:block;
	}
	
	.header-small{
		display:none;
	}
	
	.header-large .logo{
		height:40px;
	}

	.header-large table{
		width:70%;
		margin-left:15%;
		margin-right:15%;
	}

	.header-large table td{
	}


}​

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


@media  screen and (max-width:768px) {
    .header-large{
		display:none;
	}

	.header-small{
		position: fixed;
		top: 0;
		width: 100%;
		padding-top:5px;
		padding-bottom:5px;
		z-index: 999;
		font-family: roboto-bold;
		color:#C5C6D0;
		background-color:#222222;
		display: flex;
		justify-content: center;
		display:block;
	}
	
	.header-menu{
		position: fixed;
		top: 50px;
		width: 100%;
		padding-top:5px;
		padding-bottom:5px;
		z-index: 999;
		font-family: roboto-bold;
		color:#C5C6D0;
		background-color:#222222;
		display: flex;
		justify-content: center;
		display:none;
	}
	
	.header-small .logo{
		height:40px;
	}

	.header-small table{
		width:90%;
		margin-left:5%;
		margin-right:5%;
	}

	.header-small table td{
	}
	
	.content-about{
		margin-left:5%;
		margin-right:5%;
	}
	
	.content-project{
		margin-right:5%;
		margin-left:5%;
	}
	
	.content-about{
		margin-right:5%;
		margin-left:5%;
	}
	
	.content-portcontainer{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		min-height: 0;
		min-width: 0;
	}
	
	.content-portfolio{
		margin-top:5px;
		margin-bottom:5px;
		margin-left:0px;
		margin-right:0px;
		width:100%;

	}
	
	.tech-icon{
		width:70px;
		height:70px;
	}
	
	.app-icon{
		width:70px;
		height:70px;
	}

}​