body{background-color: rgb(239, 239, 239);}
a{text-decoration: none;color: inherit;}
.clearfix::after{content: '';display: block;clear: both;}
* {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;}
/* ... */

[data-x].active{outline: 10px solid red;}
[data-x].offset{transform : translateY(100px);}
[data-x]{transform: translateY(0); transition: all 0.8s;}

.topNavBar {padding:20px 0px 20px 0px;position: fixed;top: 0;left: 0;width: 100%; transition: all 0.5s; color: #b7b7b7;}
.topNavBar.sticky{background: white; padding: 10px 0; z-index: 1; box-shadow:0 0 10px rgba(0,0,0,0.25);color: #3d4451;}
.topNavBar-inner{padding: 0 16px;}
.topNavBar .logo{font-family: "Arial Black";font-size: 24px;padding-top: 3px;padding-bottom: 4px;}
.topNavBar .logo .rs{color: rgb(232, 103, 107);margin-right: 4px;}
.topNavBar .logo .card{color: rgb(154, 157, 162)}

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

.topNavBar  nav > ul{list-style: none;padding: 0;margin: 0;}
.topNavBar  nav > ul > li{float: left;margin-left: 17px;margin-right: 17px; position: relative;}
.topNavBar  nav > ul > li > a{font-size: 12px;color: inherit;font-weight: bold;border-bottom: 3px solid transparent;border-top: 3px solid transparent; padding: 5px 0; display: block; position: relative;}
.topNavBar  nav > ul > li.active >a::after,
.topNavBar  nav > ul > li.highlight >a::after{content:''; display: block; position: absolute;top:100%; left:0; width: 100%; background: #e06567;height: 3px;animation: menuSlide 0.3s;}
@keyframes menuSlide{
  0%{ width: 0;}
  100%{ width: 100%;}
}
.topNavBar .submenu{ display: none; position: absolute; right: 0; top:100%; background: white; color: #3d4451; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
.topNavBar li.active> .submenu{display: block; animation: submenuSlide 0.3s; }
@keyframes submenuSlide{
  0%{margin-right: 100%;}
  100%{margin-right: 0%;}
}
.topNavBar .submenu > li{white-space: nowrap; padding: 5px 10px;}

.banner { height: 515px; background-image: url(./img/rs-cover.jpg); background-position: center center; background-size: cover;}
.banner .mask{ height: 515px; background-color: rgba(0,0,0,0.8);}

.userCard{  max-width: 940px; margin:-370px auto 0; background-color: #ffffff; box-shadow: 0px 1px 10px 1px rgba(143,140,143,1);}
.userCard .picture { float: right;bottom: 0}

.userCard .welcome { background: #e6686a; color: white; display: inline-block; padding: 4px 16px; line-height: 22px; position: relative;margin-bottom: 10px;}
.userCard .welcome .triangle{ display: block; border: 10px solid  transparent; width: 0; border-left-color: #e6686a; border-top-width: 0px; position: absolute; left: 4px; top: 100%;}
.userCard .text{ float: left; margin-left: 65px; width: 470px;}
.userCard .text h1{ margin-top: 18px;}
.userCard .text hr{ margin: 20px 0;}
.userCard .pictureAndText{padding: 50px;}
.userCard dl dt,.userCard dl dd{ float: left; padding: 5px 0;}
.userCard dl dt{  width: 30%; font-weight: bold;}
.userCard dl dd{ width: 70%; color: #9da0a7;}

.userCard > footer.media { background-color: #e6686a; text-align: center;}
.userCard > footer.media >a{display: inline-block; width: 40px; line-height: 30px; padding: 5px 0; border-radius: 50%; margin:16px;}
.userCard > footer.media > a:hover{ background: #CF5D5F;}
.userCard svg{ width: 30px; height: 30px;  fill: white; vertical-align: top;}

main > p  >a.downloadResume{ border: 1px solid rgb(203, 205, 207); border-radius: 3px; display: inline-block; vertical-align: top; padding:21px 55px; font-size: 14px; color: #3d4451; font-weight: 700; transition: box-shadow 0.5s; margin-top: 32px; margin-bottom: 32px;}
main > p.downloadResume-wrapper{ /* border: 1px solid red; */ text-align: center;}
body > main .downloadResume:hover { box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.4);}
body > main .selfIntroduction{ margin-left: auto; margin-right: auto; text-align: center; font-family: kai; line-height: 1.8; font-size: 18px;}
body > main .selfIntroduction >span{
  background: #e6686a;
  border-radius: 3px;
  opacity:0.7;
}
section.skills,
section.portfolio{ max-width: 940px; margin-left: auto; margin-right: auto; margin-top: 60px;}

section.skills .progressBar{ height: 5px;  border-radius: 2px; background: rgb(251, 224, 225);margin: 4px 0 40px;overflow: hidden;}

section.skills .progressBar >.progress{ height: 100%;border-radius: 2px;background: #e6686a; width: 70%; transform: translateX(0);transition: all 1s;}
section.skills.offset .progress{ transform: translateX(-100%);}
section.skills h3 { font-size: 14px; line-height: 1.1; padding-right: 40px; padding-bottom: 5px;}
section.skills >ol >li{  float: left;width: 48%;box-sizing: border-box;padding-bottom: 40px;}
section.skills >ol >li:nth-child(even){float: right;}

section.skills >ol{ /* border: 1px solid red; */ background-color: white; padding: 40px 50px 10px 50px; box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.5);}

section.skills >h2,
section.portfolio >h2,
section.message >h2{ text-align: center; margin-bottom: 28px; margin-top: 28px; color: #3d4451; font-size: 34px; line-height: 1.2; font-weight: 600;}

section.portfolio >h2{ margin-bottom: 46px;}
section.portfolio { text-align: center; margin-bottom: 100px;  }
section.portfolio .swiper-container {width: 668px;height: 501px;}
section.portfolio .swiper-container .swiper-slide img{
  width: 100%;
}
section.portfolio .swiper-container a{
  text-decoration:underline;
}
.swiper-button-prev,
.swiper-button-next{background-color: white;width: 64px;height: 64px;border-radius: 50%;margin-top: 32px;}

section.message{
  margin-bottom: 50px;
}

section.message > ol{
  max-width: 700px;
  margin: 0 auto;
  border-top: 1px solid #DDD;
}


section.message > ol > li {
  padding: 16px;
  border-bottom: 1px solid #DDD;
}

section.message > #postMessageForm{
  max-width: 700px;
  font-size: 18px;
  margin: 0 auto;
  padding: 16px;
  text-align: center
}
section.message > #postMessageForm > input[name='content']{
  width: 200px;
}