/* <div float='left'><img src='http://www.free-website-hit-counter.com/c.php?d=9&id=113396&s=49' border='0'><br/></div> */



#header{
	width: 100%;
	height: 200px;
	background-color: #6d9ac0;
	border-radius: 14px;
}
#myprofile img{
   border-radius: 50%;
  width: 150px;
  height: 150px;

}
.name{
	margin-left: 170px;
	margin-top: -129px;
	letter-spacing: 0.1em;
}
#profesion{
	margin-top: -18px;
font-size: 30px;
font-family: fantasy;
letter-spacing: 0.3em;
animation: anim 5s infinite;
}
@keyframes anim{
	0%{color:#e40d0d;}
	15%{color:tomato;}
	25%{color:#eaf80be6;}
	50%{color:#3f0;}
	75%{color:#1024ff;}
	90%{color: #ed7704;}
	100%{color:#e60bdc;}
}

.contact{
	   
       float: right;
    margin-top: -9em;
    padding: 2em;
    letter-spacing: 0.1em;
    line-height: 2.0em;
}

.nav_div{
	width: 600px;
height: 45px;
margin-left: 23em;
background-color: #4fabd7;
margin-top: -36px;
border-radius: 10px;
box-shadow: 0 8px 13px #090909;


}
.navbar ul li a{
  text-decoration: none;
  color: #fff;
}

.navbar ul li{
text-align: center;
font-weight: bold;
color:#fbfbfbe6;
list-style: none;
float: left;
margin: 30px;
margin-top: 0.5em;
padding: 0.2em;


}
.navbar ul li:hover{
color:red;
box-shadow: 0 2px 3px #465ba5;

}


#active{
	color: red;
	box-shadow: 0 2px 3px #465ba5;
}
/*  this is container section */

.container{

	width: 100%;
	height: 990px;
	margin-top: 18px;
	

}
.section{
	height: 220px;
}
#skills{
	width: 262px;
height: 28px;
background-color: #6d9ac0;
text-align: center;
padding-top: 20px;
margin-left: 66px;
border-left: 40px;
border-bottom-left-radius: 7em;
border-top-right-radius: 7em;
}
#line_style hr{
	width: 914px;
margin-top: -1.2em;
margin-left: 24em;
color: #4fabd7;
}
.skill_percent{
	border-radius: 50%;
width: 130px;
height: 130px;
text-align: center;
background-color: #fff;
margin-top: 45px;
margin-left: 165px;
box-shadow: 0 5px 3px;
float: left;
transition: 1s;
transform: translate(0,0);
animation: sinusoid 2.5s ease infinite;
}
.sk1{
	animation: sinusoid 3s ease infinite;
}
.sk2{
	animation: sinusoid 3.5s ease infinite;
}
.sk3{
	animation: sinusoid 4s ease infinite;
}
@keyframes sinusoid{
	0%,50%{    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: cubic-bezier(.2,.25,.55,1);
    animation-timing-function: cubic-bezier(.2,.25,.55,1);
	}
	25% {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
    -webkit-animation-timing-function: cubic-bezier(.45,0,.8,.75);
    animation-timing-function: cubic-bezier(.45,0,.8,.75);
}
75% {
    -webkit-transform: translateY(7px);
    transform: translateY(7px);
    -webkit-animation-timing-function: cubic-bezier(.45,0,.8,.75);
    animation-timing-function: cubic-bezier(.45,0,.8,.75);
}
100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
}
.skill_percent:hover{
	border-radius: 50%;

box-shadow: 0px 7px 3px 3px;
transform: translate(0,-20px);

}
.skill_percent img{
	width: 110px;
height: 104px;
padding-top: 8px;
}

.skill_percent #js{
	width: 88px;
}
.skill_percent #sql{
	width: 145px;
	height: 132px;
}

/* Experience section */

.experience{
	margin: 67px;
font-size: 19px;

}
.experience ul li{
	color: #ce0101;
}
.sectionBack{
	background-color: #ababab99;
	height: 380px;
}
.year{
	width: 118px;
height: 24px;
background-color: #6d9ac0;
text-align: center;
padding-top: 4px;
margin-top: -45px;
margin-left: 15em;
border-radius: 10px;
}
#ptext{
	margin-left: 41px;
	font-size: 16px;
	margin-bottom: -35px;
}


/*Device width  maximum width 590px*/
 @media screen and (max-width:590px)and (min-width:350px){
#header{
	height: 165px;
}
#myprofile img{
   border-radius: 50%;
  width: 100px;
  height: 100px;

}
.name{
	margin-left: 107px;
	 margin-top: -84px;
    font-size: 8px;
}
#profesion{
	margin-top: -12px;
	font-size: 15px;
letter-spacing: 0.29em;
}

.contact{
	   
      font-size: 12px;
    margin-top: 0em;
    padding: 1em;
letter-spacing: 0.1em;
line-height: 1.2em;
float: left;
}

.nav_div{
width: 100%;
height: 42px;
margin-top: -15px;
margin-left: 0em;
}

.navbar ul li{

margin: 2%;
font-size: 12px;
}
#aligning-left{
	margin-left:10%;
}
.section{
	height: 146px;
}
#skills{
	width: 170px;
height: 21px;
padding-top: 8px;
margin-left: 2px;
font-size: 13px;
}
#line_style hr{
	width: 50%;
margin-left: 11em;
}
.skill_percent{
width: 80px;
height: 80px;
margin-top: 33px;
margin-left: 6px;
}
.skill_percent img{
	width: 60px;
height: 68px;
}

.skill_percent #js{
	width: 50px;
}
.skill_percent #sql{
width: 95px;
height: 95px;
margin-top: -8px;

}
/* Experience section */

.experience{
	margin: 66px;
font-size: 14px;
margin-left: -13px;

}
.sectionBack{
	
	height: 425px;
}
.year{
	width: 83px;
height: 15px;
margin-top: -31px;
margin-left: 15.5em;
}
#ptext{
	font-size: 11px;
}


 }