body
{
	background-color: #FFFF !important;
}

.intro
{
	text-align: center;
	padding-top: 15%;
	padding-bottom: 8%;
	margin-bottom: 23px;
	margin-top: 0px;
}

.container {
    margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 75px !important;
    margin-left: auto;
}


#spin {

  color:#000000;
  font-weight: bold;
  height:20px;
  width:20px;
  padding-right: 5px;
  background-color: White;
  border-radius: 10px;
}
#spin:after {
  content:"";
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% { content:"Java"; } 
  50% { content:"AEM"; }  
  100% { content:"UI"; } 
}

h5{color:white;}


	.tech-used ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFF;
}

.tech-used li {
    float: left;
    color: white;
    text-align: center;
    background-color: #EF5350;
    border-radius: 10px;
    padding: 5px;
    margin-right: 10px;

}

.tech-used li a {
    display: block;
    color: #EF5350;
    text-align: center;
  
  
    text-decoration: none;
}

.tech-used li a:hover {
    background-color: #FFFF;
}


.card-panel
{
border-radius: 10px !important;
margin-top: 30px !important;	
}

.card .card-title
{
    font-weight: 600!important;
}

.card .card-content p
{
    margin-top:50px!important;
    margin-bottom:0px!important;
}

.col s12 m3 project-desc
{
	  border-radius: 10px;
}


.social-network a.icoRss:hover {
	background-color: #F56505;
}
.social-network a.icoFacebook:hover {
	background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
	background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
	background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
	background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
	background-color:#007bb7;
}
.social-network a.icogithub:hover {
	background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
	color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
	color:#44BCDD;
}

.social-circle li a {
	display:inline-block;
	position:relative;
	margin:0 auto 0 auto;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	text-align:center;
	width: 50px;
	height: 50px;
	font-size:20px;
}
.social-circle li i {
	color: rgb(0, 0, 0) !important;
	margin:0;
	line-height:50px;
	text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-ms--transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.social-circle i {
	color: #FFF !important;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 0.8s;
}

 ul.social-network {
    list-style: none;
    position: relative;
    top: 100px;
    right: auto;
    bottom: 0px;
    left: center;
    margin-left: 0 !important;
    padding: 0;
}
ul.social-network li {
	display: inline;
	margin: 0 5px;
}

.fixed-action-btn
{
position: absolute !important;
top:50px;
}


.skills
{
    margin-top:50px;
}


ul.skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 250px));
    margin: 60px 0px 0px 20px;
    overflow: hidden;
    list-style: none;
}


 ul.skills-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}

ul.skills-list li::before {
    content: "\25B9";
    position: absolute;
    left: 0px;
    color: var(--green);
    font-size: var(--fz-sm);
    //line-height: 12px;
}

.about p{
margin: 0px  0px 15px;
font-size: 16px;
}


.card-content a{
    color: rgb(0, 0, 0);
    //text-transform: uppercase;
    text-decoration: none;
    //letter-spacing: 0.15em;  
    //display: inline-block;
    //padding: 15px 20px;
    position: relative;
  }
  .card-content a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: rgb(0, 0, 0);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .card-content a:hover:after { 
    width: 100%; 
    left: 0; 
  }

  
/*
  .card-title a{
    color: rgb(255, 255, 255);
    //text-transform: uppercase;
    text-decoration: none;
    //letter-spacing: 0.15em;  
    //display: inline-block;
    //padding: 15px 20px;
    position: relative;
    cursor:pointer;
  }
  .card-content a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: rgb(255, 255, 255);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .card-content a:hover:after { 
    width: 100%; 
    left: 0; 
  }
*/

  .card-content .project-tech-list{
  display: flex;
  align-items: flex-end;
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0px;
  margin: 20px 0px 0px;
  list-style: none;
  }


  .card-content .project-tech-list li {
    font-family: monospace;
    font-size: 13px;
    line-height: 1.75;
    margin-right:15px;
}



.card-content .range{
color: #007bff;
font-family:monospace;
text-align: center;
}

.wave {
    animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;        /* Change to speed up or slow down */
    animation-iteration-count: infinite;  /* Never stop waving :) */
    transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
    display: inline-block;
    font-size:2.0em;
    width:40px;
  }
  
  @keyframes wave-animation {
      0% { transform: rotate( 0.0deg) }
     10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
     20% { transform: rotate(-8.0deg) }
     30% { transform: rotate(14.0deg) }
     40% { transform: rotate(-4.0deg) }
     50% { transform: rotate(10.0deg) }
     60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
    100% { transform: rotate( 0.0deg) }
  }