* {
    box-sizing: border-box;
    margin: 0;
    -webkit-text-size-adjust: none;
}

html {
    font-size: 1rem;
    background-color: #fff;
}

body {
    width: 40rem;
    margin: 0 auto;
    line-height: 1.4;
    background-color: #fff;
    font-size: 2rem;
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 100;
}

p {
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 1.5rem;
}

span {
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
}

h1 {
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 5rem;
    color: #221814;
    text-align: center;
    letter-spacing: 4px;
}

a {
    text-decoration: none;
}

.fullimg {
    width: 40rem;
    margin: 0 auto;
}

#lyric-logo {
    background: url(../img/Lyric-logo.png);
    width: 126px;
    height: 91px;
    position: absolute;
    left: 30px;
    top: 20px;
    z-index: 999;
    cursor: pointer;
}


/********** Menu ***********/

#menu-icon {
    position: fixed;
    top: 45px;
    right: 40px;
    width: 50px;
    height: 30px;
    z-index: 9999;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#menu-icon div {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #5f5f5f;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#menu-icon div:nth-child(1) {
    top: 0px;
}

#menu-icon div:nth-child(2),
#menu-icon div:nth-child(3) {
    top: 15px;
}

#menu-icon div:nth-child(4) {
    top: 32px;
}

#menu-icon.open div:nth-child(1) {
    top: 15px;
    width: 0%;
    left: 50%;
    background-color: #fff;
}

#menu-icon.open div:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    height: 2px;
}

#menu-icon.open div:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #fff;
    height: 2px;
}

#menu-icon.open div:nth-child(4) {
    top: 32px;
    width: 0%;
    left: 50%;
    background-color: #fff;
}

#menu-bar {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9998;
    right: 0;
    top: 0;
    overflow: hidden;
    display: none;
}

#menu-bar h2 {
    cursor: pointer;
}

#menu-bar.active {
    display: block;
}

#menu-mask {
    position: absolute;
    overflow: hidden;
    top: -60rem;
    left: -200px;
    width: 80rem;
    height: 100rem;
    background-color: #e69c9d;
    opacity: 0;
    transform: translate(10rem, -40rem) rotate(200deg);
    transition: all 0.5s ease-in-out;
    z-index: -1;
}

#menu-mask.active1 {
    opacity: 1;
    transform: translate(-1rem, 50rem) rotate(200deg);
    transition: all 0.5s ease-in-out;
}

#menu-bar h2 {
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    font-weight: 200;
    font-size: 1.4em;
}

#menu-bar h2 a {
    color: #fff;
    transition: all 0.3s ease-in-out;
}

#menu-bar h2 a:hover {
    color: #5f576e;
    transition: all 0.3s ease-in-out;
}

#menu-bar h2:nth-child(1) {
    margin-top: 150px;
}

#menu-bar h2.active2 {
    opacity: 1;
}

#menu-bar div {
    margin-top: 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

#menu-bar div.active2 {
    opacity: 1;
}

#dribbble1 {
    background-image: url(../img/dribbble1.png);
    width: 25px;
    height: 24px;
    float: left;
    position: relative;
    left: 36%;
}

#dribbble1:hover {
    background-image: url(../img/dribbble10.png);
    transition: all 0.3s ease-in-out;
}

#vimeo1 {
    background-image: url(../img/vimeo1.png);
    width: 25px;
    height: 20px;
    float: left;
    position: relative;
    left: 45%;
    top: 3px;
}

#vimeo1:hover {
    background-image: url(../img/vimeo10.png);
    transition: all 0.3s ease-in-out;
}

#github1 {
    background-image: url(../img/github1.png);
    width: 23px;
    height: 25px;
    float: left;
    position: relative;
    left: 54%;
}

#github1:hover {
    background-image: url(../img/github10.png);
    transition: all 0.3s ease-in-out;
}


/********** Index ***********/

#hello-img {
    position: absolute;
    top: 100px;
    left: 0;
}

#hello-img1 {
    position: absolute;
    top: 100px;
    left: 0;
    display: none;
}

#hello-text {
    position: relative;
    top: 670px;
    left: 3rem;
    z-index: 999;
}

#source {
    display: none;
}

#output {
    font-family: brandon-grotesque, sans-serif;
    color: #5f576e;
    font-size: 3rem;
}

.typing-cursor {
    font-size: 3rem;
}

#begin-text {
    font-size: 2rem;
    margin-left: 5px;
    display: none;
}

#begin-text label {
    color: #e69c9d;
}

#hello-in {
    position: absolute;
    color: #5f576e;
    text-align: center;
    width: 15rem;
    top: 860px;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    border: 1px solid #5f576e;
    border-radius: 5px;
    left: calc(50% - 7.5rem);
}


/*****   what I do ********/

.wrap {
    position: relative;
    width: 40rem;
}

#wrap1-head {
    margin-top: 130px;
    margin-bottom: 70px;
}

#wrap1-head p {
    text-align: center;
    margin-top: 0;
}

#wrap1-head span {
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 1.3rem;
    color: #5f576e;
}

#wrap1-head span a {
    color: #5f576e;
}

#wrap1-head span:before {
    content: '|';
    padding: 7px;
}

#wrap1-head span:nth-child(1):before {
    content: '';
}

#wrap1 h2 {
    font-family: futura-pt, sans-serif;
    color: #e69c9d;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
    margin-bottom: 3rem;
}

.w-block {
    width: 36rem;
    position: relative;
    margin: 0 2rem;
    margin-bottom: 4rem;
    display: inline-block;
    overflow: hidden;
}

.W-block-img {
    width: 100%;
    height: 220px;
}

#w1 {
    background: url(../img/w1.png) no-repeat center;
}

#w2 {
    background: url(../img/w2.png) no-repeat center;
}

#w3 {
    background: url(../img/w3.png) no-repeat center;
}

#w4 {
    background: url(../img/w4.png) no-repeat center;
}

#w5 {
    background: url(../img/w5.png) no-repeat center;
}

#w6 {
    background: url(../img/w6.png) no-repeat center;
}

#w7 {
    background: url(../img/w7.png) no-repeat center;
}

#w8 {
    background: url(../img/w8.png) no-repeat center;
}

#w9 {
    background: url(../img/w9.png) no-repeat center;
}

#w10 {
    background: url(../img/w10.png) no-repeat center;
}

#w11 {
    background: url(../img/w11.png) no-repeat center;
}

#w12 {
    background: url(../img/w12.png) no-repeat center;
}

h3 {
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2em;
    color: #221814;
    left: 0;
    margin-top: 20px;
    margin-bottom: 2px;
}

.w-block span {
    position: absolute;
    right: 0;
    top: 15.8rem;
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 1.2rem;
    color: #747a95;
}

.w-block p {
    color: #221814;
}


/******* Who I am *******/

#o {
    width: 2.43rem;
    height: 2.43rem;
    background-image: url(../img/o.png);
    background-size: 100% 100%;
    position: absolute;
    left: 4rem;
    top: 9rem;
}

#iu1 {
    width: 4.87rem;
    height: 3.87rem;
    background-image: url(../img/iu1.png);
    background-size: 100% 100%;
    position: absolute;
    right: 7rem;
    top: 11rem;
    z-index: 999;
}

#s1-left {
    left: 5rem;
    position: absolute;
    top: 32rem;
}

#s1-left span {
    font-family: brandon-grotesque, sans-serif;
    font-size: 4rem;
}

#s1-left h1 {
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-weight: 100;
    color: #53565a;
    font-size: 4rem;
    text-align: left;
}

#s1-left h1 span {
    font-family: brandon-grotesque, sans-serif;
    font-style: normal;
    font-size: 4rem;
    font-weight: 100;
    color: #e69c9d;
}

#s-line1-cover {
    height: 0.09rem;
    width: 37.5rem;
    margin-bottom: 1rem;
    margin-top: 0.62rem;
    position: relative;
    overflow: hidden;
}

#s-line1 {
    height: 0.09rem;
    width: 0;
    background-color: #756d88;
}

#s-line1.active {
    width: 37.5rem;
    height: 0.09rem;
    background-color: #756d88;
    transition: width 0.6s ease-in-out;
}

#s1-left p {
    width: 34.37rem;
    font-size: 1.8rem;
    padding: 0.31rem;
    display: none;
    line-height: 2rem;
}

#s1-left label {
    color: #e69c9d;
}

#s1-right {
    width: 19.5rem;
    height: 20.68rem;
    background-image: url(../img/s1.gif);
    background-size: 100% 100%;
    position: absolute;
    right: 11rem;
    top: 9rem;
}

#s2-upper-left {
    width: 23.62rem;
    height: 19.69rem;
    background-image: url(../img/s2-w.png);
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 1rem;
    z-index: 999;
    display: none;
}

#s-line2 {
    position: absolute;
    height: 0.09rem;
    width: 0;
    background-color: #756d88;
    top: 9rem;
    left: 6.25rem;
}

#s-line2.active {
    width: 35rem;
    transition: width 0.6s ease-in-out;
}

#s2-upper-right {
    position: absolute;
    width: 20.62rem;
    right: 2rem;
    top: 9.5rem;
}

#s2 h2 {
    color: #53565a;
    font-size: 3rem;
    font-weight: 400;
    position: absolute;
    z-index: 999;
    right: 0;
    display: none;
}

#s2 h4 {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 100;
    font-style: italic;
}

#s2-bottom-right {
    position: absolute;
    padding: 1.25rem 0 0 1.25rem;
    overflow: hidden;
    width: 35rem;
    left: 2rem;
    top: 18rem;
    display: none;
}

#s2-bottom-left {
    position: absolute;
    padding: 1.25rem 0 0 1.25rem;
    overflow: hidden;
    width: 35rem;
    left: 2rem;
    top: 38rem;
    display: none;
}

#s2-bottom-left h4,
#s2-bottom-right h4 {
    padding-top: 0.62rem;
    margin-left: 2.19rem;
}

#s2-bottom-left div,
#s2-bottom-right div {
    float: left;
    margin: 1.25rem 2.5rem;
}

#s2-bottom-left div {
    margin-right: 5rem;
}

#s3 h2 {
    right: 15rem;
    top: 2rem;
    color: #53565a;
    font-size: 3rem;
    font-weight: 400;
    position: absolute;
    z-index: 999;
}

#s3-block {
    width: 3.5rem;
    height: 5rem;
    position: absolute;
    right: 2rem;
    top: -3rem;
    background-color: #e69c9d;
}

#s3-block.active {
    height: 54rem;
    transition: all 1s ease-in-out;
}

#s3-left {
    position: absolute;
    left: 0.62rem;
    width: 23.12rem;
    height: 29.37rem;
    top: 11.87rem;
}

#s3-right {
    position: absolute;
    right: 10rem;
    width: 24.12rem;
    height: 29.37rem;
    top: 5rem;
}

#s3-right-icon {
    width: 24.12rem;
    height: 15.27rem;
    background-image: url(../img/s3-2.png);
    background-size: 100% 100%;
    position: absolute;
    left: 8rem;
    top: 9rem;
    z-index: 9999;
}

#s3-gif1 {
    width: 57.5rem;
    height: 28.12rem;
    background-image: url(../img/s7.gif);
    background-size: 100% 100%;
    position: absolute;
    right: -20rem;
    top: 4rem;
    display: none;
}

#s3-gif2 {
    width: 57.5rem;
    height: 28.12rem;
    background-image: url(../img/s8.gif);
    background-size: 100% 100%;
    position: absolute;
    right: -20rem;
    top: 4rem;
    display: none;
}

#s3-left-text {
    width: 22.62rem;
    height: 10.31rem;
    background-image: url(../img/s3-1text.png);
    background-size: 100% 100%;
    position: absolute;
    top: 43rem;
    left: 6rem;
    display: none;
}

#s3-right-text {
    width: 368px;
    height: 161px;
    background-image: url(../img/s3-2text.png);
    position: absolute;
    top: 22rem;
    left: 0;
    display: none;
}

#s3-pic {
    width: 7.37rem;
    height: 5.5rem;
    background-image: url(../img/s3-3.png);
    background-size: 100% 100%;
    position: absolute;
    top: 38rem;
    right: 0.125rem;
    z-index: 999;
    display: none;
}

#s3 h4 {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 300;
    position: absolute;
    right: 13rem;
    top: 39rem;
    color: #5f576e;
    display: none;
}

#s4 h2 {
    position: absolute;
    left: 2rem;
    top: 2rem;
    font-size: 3rem;
    font-weight: 400;
    z-index: 999;
}

#s4-left {
    width: 30.37rem;
    height: 28.75rem;
    background-image: url(../img/s3.gif);
    background-size: 100% 100%;
    position: absolute;
    top: 7rem;
    left: 5rem;
}

#s4-line {
    position: absolute;
    height: 0.09rem;
    background-color: #756d88;
    top: 7rem;
    left: 0;
    z-index: 999;
    width: 0;
}

#s4-line.active {
    width: 35rem;
    transition: width 0.6s ease-in-out;
}

#s4 h4 {
    font-weight: 100;
    font-size: 1.2rem;
    font-style: italic;
}

#s4-right {
    position: absolute;
    left: 3rem;
    top: 38rem;
    width: 34rem;
    display: none;
}

h5 {
    font-size: 1.6rem;
    color: #808080;
    font-weight: 200;
}

#s4-right div {
    margin-bottom: 20px;
}

#s4 a {
    color: #e69c9d;
}

#s5-line {
    width: 0.09rem;
    position: absolute;
    left: 20rem;
    top: 0;
    height: 0;
    z-index: 1;
    background-color: #756d88;
}

#s5-line.active {
    height: 45rem;
    transition: all 1s ease-in-out;
    z-index: -1;
}

#s5-left {
    width: 19.87rem;
    height: 18.5rem;
    background-image: url(../img/s5.png);
    background-size: 100% 100%;
    position: absolute;
    top: 16rem;
    left: 2rem;
    z-index: 999;
    display: none;
}

#s5-right {
    display: none;
    position: absolute;
    right: 3rem;
    top: 14rem;
}

#s5-right div {
    margin: 2rem 0;
}

#s5-upper {
    width: 11.75rem;
    height: 6.87rem;
    background-image: url(../img/s4.gif);
    background-size: 100% 100%;
    position: absolute;
    right: 4rem;
    top: 38rem;
}

#s6-upper {
    height: 0.69rem;
    width: 17rem;
    background-color: #e7d9c7;
    position: absolute;
    left: 3rem;
    top: 45rem;
    display: none;
}

#s6 h2 {
    position: absolute;
    top: 36rem;
    left: 4rem;
    z-index: 999;
    font-size: 3rem;
    font-weight: 400;
}

#s6-right {
    width: 35rem;
    height: 43.75rem;
    background-image: url(../img/s5.gif);
    background-size: 100% 100%;
    position: absolute;
    right: -9rem;
    top: 2rem;
}

#s6-icon {
    position: absolute;
    left: 4rem;
    top: 34rem;
    z-index: 999;
    display: none;
}

#s6-icon a {
    margin-right: 2rem;
}

#s6-icon a:nth-child(1) {
    background-image: url(../img/dribbble10.png);
    background-size: 100% 100%;
    width: 1.56rem;
    height: 1.56rem;
    float: left;
}

#s6-icon a:nth-child(1):hover {
    background-image: url(../img/dribbble1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s6-icon a:nth-child(2) {
    background-image: url(../img/vimeo10.png);
    background-size: 100% 100%;
    width: 1.56rem;
    height: 1.25rem;
    float: left;
    margin-top: 0.125rem;
}

#s6-icon a:nth-child(2):hover {
    background-image: url(../img/vimeo1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s6-icon a:nth-child(3) {
    background-image: url(../img/github10.png);
    background-size: 100% 100%;
    width: 1.44rem;
    height: 1.56rem;
    float: left;
}

#s6-icon a:nth-child(3):hover {
    background-image: url(../img/github1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s6-icon a:nth-child(4) {
    background-image: url(../img/facebook10.png);
    background-size: 100% 100%;
    width: 1.5rem;
    height: 1.5rem;
    float: left;
}

#s6-icon a:nth-child(4):hover {
    background-image: url(../img/facebook1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s6-icon a:nth-child(5) {
    background-image: url(../img/twitter10.png);
    background-size: 100% 100%;
    width: 1.69rem;
    height: 1.31rem;
    float: left;
    margin-top: 0.125rem;
}

#s6-icon a:nth-child(5):hover {
    background-image: url(../img/twitter1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s6-icon a:nth-child(6) {
    background-image: url(../img/instagram10.png);
    background-size: 100% 100%;
    width: 1.56rem;
    height: 1.56rem;
    float: left;
}

#s6-icon a:nth-child(6):hover {
    background-image: url(../img/instagram1.png);
    background-size: 100% 100%;
    transition: all 0.3s ease-in-out;
}

#s7-left {
    position: absolute;
    height: 13.56rem;
    left: 0;
    bottom: 0;
}

#s7-left div {
    background-image: url(../img/s6.gif);
    background-size: 100% 100%;
    width: 11.75rem;
    height: 13.56rem;
    margin-left: 2rem;
    bottom: 3rem;
}

#s7-left span {
    position: absolute;
    font-size: 1.8rem;
}

#s7-left span:nth-child(1) {
    bottom: 3.75rem;
    left: 1rem;
}

#s7-left span:nth-child(2) {
    bottom: 3.75rem;
    left: 13.5rem;
}

#s7-bottom {
    position: absolute;
    height: 2.5rem;
    width: 40rem;
    background-color: #e69c9d;
    bottom: 0;
}

#s7-back {
    position: absolute;
    right: 2rem;
    bottom: 3rem;
    color: #898888;
    font-size: 1.5rem;
}


/****** Say Hi *****/

#h-left {
    width: 30rem;
    position: absolute;
    top: 32rem;
    left: 5rem;
}

#h-left p {
    margin-bottom: 20px;
    margin-top: 30px;
}

#h-right {
    background-image: url(../img/h-pic.png);
    width: 430px;
    height: 298px;
    position: absolute;
    right: 6.5rem;
    top: 10rem;
}

#r3 {
    position: absolute;
    width: 35px;
    right:8rem;
    top: 43rem;
}

#iu3 {
    position: absolute;
    width: 40px;
    left:3rem;
    top:30rem;
}

/******* day by day *******/

#wrap-day{
    position: relative;
    top:10rem;
}

#d1 {
    background: url(../img/d1.png) no-repeat center;
}

#d2 {
    background: url(../img/d2.png) no-repeat center;
}