body {
    font-family: Lato,"Microsoft YaHei",sans-serif;
    font-weight: 400;
    font-size: 1.1em
}

h1,h2,h3,h4,h5,h6{
    margin-top: 0;
}

h1 {
    font-size: 3.5em;
    margin: 0 0 0.5em 0;
}

h2 {
    font-size: 2em;
    margin: 0 0 0.2em 0;
}

h3 {
    font-size: 1.5em;
    margin: 0 0 0.1em 0;
}

h4 {
    font-size: 1.25em;
    margin: 0 0 0.1em 0;
}

h5 {
    font-size: 1.2em;
    margin: 0 0 0.1em 0;
}

h6 {
    font-size: 1.1em;
    margin: 0 0 0.1em 0;
}

p {
    font-size: 1.1em;
    margin: 0.5em 0
}

ul {
    font-size: 1.1em
}

a {
    color: #008a75;
    text-decoration: none;
    transition: 0.5s
}

a:hover {
    color: #9f3
}

a.highlight {
    color: #9f3
}

a.highlight:hover {
    color: #008a75
}

#lang-panel {
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 5px;
    z-index: 100;
    font-size: 0.8em
}

#lang-panel .lang {
    display: inline-block;
    border-radius: 5px;
    padding: 2px 8px
}

#lang-panel .lang.selected {
    background-color: #aee2d9;
    color: #008a75;
    cursor: default
}

p {
    color: #aee2d9
}

h1 {
    text-shadow: 1px 2px #22c3aa,2px 4px #aee2d9;
    text-align: center
}

h1+h2,h1+p {
    margin-top: -0.5em
}

h2+h1 {
    margin-top: 0.8em
}

h1 em,h2 em,h3 em,h4 em,h5 em,h6 em {
    color: #008a75;
    font-style: normal
}

ul {
    color: #aee2d9
}

#title {
    margin: 0.25em 0 0 0
}

#subtitle {
    margin: 1em 0 0.25em 0;
    color: #aee2d9
}

.tag-panel {
    margin: 15px auto
}

.tag {
    background-color: #096254;
    color: #aee2d9;
    border-radius: 3px;
    display: inline-block;
    padding: 2px 8px;
    margin-right: 3px;
    margin-bottom: 3px;
    opacity: 0.5
}

.tag.expert {
    opacity: 1
}

.tag.familiar {
    opacity: 0.75
}

.content {
    max-width: 800px;
    margin: 0 auto
}

* {
    box-sizing: border-box
}

.section {
    /*background-color: #22c3aa;
    */
    background: url("../img/bg.jpg") no-repeat 100%;
    color: #eef3f0;
    padding: 50px;
    transition: 0.5s
}

.section.initing {
    display: none
}

.section.leaving {
    background-color: #9f3
}

.center {
    text-align: center
}

.clearboth {
    clear: both
}

#avatar {
    width: 200px;
    height: 200px;
    border: 5px solid #aee2d9;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}
#avatar:hover{
    border: 10px solid #aee2d9;
}
.circle-img {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #008a75;
    padding: 18px
}

.circle-img:hover {
    opacity: 0.8
}

.row {
    position: relative;
    display: flex;
    justify-content: center;
}

.row:after {
    clear: both
}

.col-1 {
    width: 8.33333%;
    float: left
}

.col-2 {
    width: 16.66667%;
    float: left
}

.col-3 {
    width: 25%;
    float: left
}

.col-4 {
    width: 33.33333%;
    float: left
}

.col-5 {
    width: 41.66667%;
    float: left
}

.col-6 {
    width: 50%;
    float: left
}

.col-7 {
    width: 58.33333%;
    float: left
}

.col-8 {
    width: 66.66667%;
    float: left
}

.col-9 {
    width: 75%;
    float: left
}

.col-10 {
    width: 83.33333%;
    float: left
}

.col-11 {
    width: 91.66667%;
    float: left
}

.col-12 {
    width: 100%;
    float: left
}

@media screen and (max-width: 760px) {
    .col-1 {
        width:100%
    }

    .col-2 {
        width: 100%
    }

    .col-3 {
        width: 100%
    }

    .col-4 {
        width: 100%
    }

    .col-5 {
        width: 100%
    }

    .col-6 {
        width: 100%
    }

    .col-7 {
        width: 100%
    }

    .col-8 {
        width: 100%
    }

    .col-9 {
        width: 100%
    }

    .col-10 {
        width: 100%
    }

    .col-11 {
        width: 100%
    }

    .col-12 {
        width: 100%
    }

    #pp-nav {
        display: none
    }
}

#contact-panel {
    text-align: center;
    margin-top: 1em
}

.social-share-element {
    width: 40px;
    height: 40px;
    background-color: #008a75;
    background-image: url("../img/social.png");
    transition: 0.5s;
    display: inline-block;
    margin-right: 2px;
    border-bottom: none;
    border-radius: 20px
}

.social-share-element:hover {
    background-color: #096254;
    border-radius: 5px
}

.social-share-element.social-twitter {
    background-position: 0 0
}

.social-share-element.social-facebook {
    background-position: -40px 0
}

.social-share-element.social-google {
    background-position: -80px 0
}

.social-share-element.social-linkedin {
    background-position: -120px 0
}

.social-share-element.social-weibo {
    background-position: -160px 0
}

.social-share-element.social-digg {
    background-position: 0 40px
}

.social-share-element.social-douban {
    background-position: -40px 40px
}

.social-share-element.social-reddit {
    background-position: -80px 40px
}

.social-share-element.social-stumble {
    background-position: -120px 40px
}

.social-share-element.social-github {
    background-position: -160px 40px
}

.social-share-text {
    font-weight: bold;
    text-indent: 0
}

#footer-follow {
    margin: 0 auto;
    width: 220px
}

.footer-follow-element {
    width: 32px;
    height: 32px;
    background-image: url("../img/social.png");
    background-size: 160px 60px;
    transition: 1s;
    display: inline-block;
    border-bottom: none
}

.footer-follow-element:hover {
    background-color: #DB6968;
    border-radius: 50%
}

.mobile * {
    text-shadow: none !important
}

.mobile #avatar {
    width: 128px;
    height: 128px;
    border: 0
}

.mobile .circle-img {
    margin: 20px 10px
}

.mobile h2 {
    text-align: center
}

.mobile h1 {
    font-size: 2.625em;
    margin: 0 0 0.5em 0;
    margin-top: 0
}

.mobile h2 {
    font-size: 1.5em;
    margin: 0 0 0.2em 0;
    margin-top: 0
}

.mobile h3 {
    font-size: 1.125em;
    margin: 0 0 0.1em 0;
    margin-top: 0
}

.mobile h4 {
    font-size: 0.9375em;
    margin: 0 0 0.1em 0;
    margin-top: 0
}

.mobile h5 {
    font-size: 0.9em;
    margin: 0 0 0.1em 0;
    margin-top: 0
}

.mobile h6 {
    font-size: 0.825em;
    margin: 0 0 0.1em 0;
    margin-top: 0
}

.mobile p {
    font-size: 0.88em
}

.mobile ul {
    font-size: 0.88em
}

.mobile .section {
    padding: 50px 10px
}

.mobile #profession.section.center {
    text-align: left
}

.mobile #project.section {
    text-align: center
}