body{

}
a{
color:inherit;
text-decoration: none;
}
*{
margin: 0;
padding: 0;
}

hr{
height: 0;
border: none;
border-top: 1px solid #dedede;
}
ul,ol{
list-style: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}

.topNavBar{
padding: 20px 0px 20px 0px;
position: fixed;
top: 0;
left: 0;
width: 100%
}
.topNavBar-inner{
padding: 0,16px;
}
.topNavBar nav > ul > li{
float: left;
margin-left: 17px;
margin-right: 17px;
}

.topNavBar nav > ul {
list-style: none;
margin: 0;
padding: 0;
}

.topNavBar nav{
padding-top: 5px;
padding-bottom: 2px;
}

.topNavBar nav > ul > li > a{
font-size: 12px;
color: #3d4450;
text-decoration: none;
font-weight: bold;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
display: block;
}

.topNavBar nav > ul > li > a:hover{
border-bottom: 3px solid #e6686d;
}

.topNavBar .logo{
font-size: 24px;
font-family: "Arial Black";
padding-top: 3px;
padding-bottom:4px;
}
.topNavBar .logo .rs {
margin-right: 4px;
color: #e6686d;
}

.topNavBar .logo .card {
color: #9a9da2;
}

.banner {
height: 514px;
background-image: url(./img/image1.jpg);
background-position: center center;
background-size: cover;
}

.banner .mask{
height: 514px;
background-color:rgb(0,0,0,0.8);
}

.userCard{
max-width: 940px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
}

.userCard .welcome{
background: #e6686d;
color: #fff;
display: inline-block;
padding: 4px 9px;
position: relative;
}

.userCard .welcome .triangle{
display: block;
border: 10px solid transparent;
width:0px;
height:0px;
border-left-color:#e6686d;
border-top-width:0px;
position: absolute;
left: 4px;
top: 100%;
}

.userCard .picture{
float: left;
margin-right: 65px;
}

.userCard .text{
float: left;
width: 450px;
}
.userCard .text h1{
margin-top: 25px;
}
.userCard .text hr{
margin: 20px 0;
}

.userCard .pictureAndText{
padding: 50px;
}

.userCard dl dt,
.userCard dl dd
{
float: left;
width: 30%;
padding: 5px 0;
}

.userCard dl dt
{
width: 30%;
font-weight: bolder;
}

.userCard dl dd
{
width: 70%;
color:#9da0a7;
}

.userCard > footer.media{
color: #e6686d;
text-align: center;
}

.userCard > footer.media > a{
display: inline-block;
border-radius: 50%;
width: 40px;
line-height: 30px;
padding: 5px 0;
margin: 16px;
}

.userCard > footer.media > a:hover{
background: #cf5d62;
}

.userCard svg{
width: 30px;
height: 30px;
fill: white;
vertical-align: top;

}

body > main{
margin-top: -400px;
}

body > main .downloadResume-wrapper{
text-align: center;
}

body > main .downloadResume{
font-size: 14px;
line-height: 16px;
padding: 21px 55px;
border: 1px solid #cdcfd1;
background: #efefef;
display: inline-block;
border-radius: 2px;
color: #3d4451;
font-weight: bold;
margin: 32px 0;
transition: box-shadow 0.3s;
}

body > main .downloadResume:hover{
box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.5);
}

.selfIntroduction{
max-width: 940px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: kai;
line-height: 1.8;
font-size: 18px;
}

section .skills,
section .portfolio{
max-width: 940px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}

section .skills > h2{
color: #3d4451;
font-size: 34px;
line-height: 1.2;
font-weight: 600;
text-align: center;
}
section .portfolio > h2{
color: #3d4451;
font-size: 34px;
line-height: 1.2;
font-weight: 600;
text-align: center;
}
section .skills h3{
font-size: 14px;
line-height: 1.1;
padding-right: 40px;
}

section .skills > ol{
background: white;
box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.5);
padding: 42px,50px 10px;
margin-top: 30px;
}

section .skills > ol >li{
float: left;
width: 48%;
box-sizing: border-box;
padding-right: 40px;
}

section .skills > ol >li:nth-child(even){
float: right;
}

section .skills .progressBar{
height: 5px;
background: #fae1e1;
margin: 4px 0 40px;
}

section .skills .progressBar> .progress{
height: 100%;
background: #e6686a;
width: 70%;
border-radius: 2px;
}
section .portfolio{
text-align: center;
margin-bottom: 100px;
}
section .portfolio > nav{
text-align: center;
}
section .portfolio > nav > ol{
border: 1px solid red;
margin: 0 auto;
display: inline-block;
vertical-align: top;

}
section .portfolio > nav > ol > li{
float: left;
margin-left: 40px;
cursor: pointer;
}

section .portfolio > nav > ol > li: :nth-child(1){
float: 0;
}
section .portfolio > nav{
display: inline-block;
vertical-align: top;
margin-top: 32px;
}

section .portfolio > nav .bar{
height: 5px;
background: white;
margin-top: 5px;
margin-bottom: 100px;
border-radius: 2px;
}
section .portfolio > nav .bar-inner{
height: 100%;
background: #cf5d62;
width: 10%;
margin-bottom: 100px;
border-radius: 2px;
transition: all 0.3s;

}

section .portfolio > nav .bar.state-1 .bar-inner{
margin-left: 0px;
width:50px;
}
section .portfolio > nav .bar.state-2 .bar-inner{
margin-left: 65px;
width:50px;
}
section .portfolio > nav .bar.state-3 .bar-inner{
margin-left: 140px;
width:96px;
}

section .portfolio .works{
position: relative;

}
section .portfolio .works > .big,
section .portfolio .works > .small{
position: absolute;
}