@charset "UTF-8";

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video

{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
};

article,aside,details,figcaption,figure
,header,hgroup,menu,nav,section

{
    display:block
}
body
{
    line-height:1;

    background-color:white;

}
ol,ul
{
    list-style:none;

}
blockquote,q
{
    quotes:none
}
blockquote:after,blockquote:before,q:after,q:before
{
    content:'';
    content:none
}
table
{
    border-collapse:collapse;
    border-spacing:0
}
    /* @font-face
{
    font-family:"futura_m";
    src:url(../font/Futura-Med.eot) format("eot"), url(../font/Futura-Med.woff) format("woff")
}@font-face
{
    font-family:"futura_r";
    src:url(../font/Futura-Boo.eot) format("eot"), url(../font/Futura-Boo.woff) format("woff")
}@font-face
{
    font-family:"futura_b";
    src:url(../font/Futura-Bol.eot) format("eot"), url(../font/Futura-Bol.woff) format("woff")
}@font-face
{
    font-family:"futura_de";
    src:url(../font/Futura-Dem.eot) format("eot"), url(../font/Futura-Dem.woff) format("woff")
}*/
@font-face
{
    font-family:"futura_m";
    src:url(../font/futura/futura\ medium\ bt.ttf) format("ttf");
}

html 
{
    font-size:62.5%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow-x:hidden
}@media screen and (max-width:420px)
{
    html
    {
        font-size:3.125vw
    }
    }*,:after,:before
{
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}body
{
    font-family:'futura_m','Helvetica Neue','Helvetica','Arial','MS PGothic', sans-serif;
    font-size:1.6rem;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;
    color:#828c96;
    overflow-x:hidden
}@media screen and (max-width:420px)
{
    body
    {
        font-size:1.2rem
    }
    }textarea
{
    font-family:'futura_r','Helvetica Neue','Helvetica','Arial','Avenir','Hiragino Sans',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic', sans-serif
}h1,h2,h3,h4,h5,h6
{
    line-height:1.2
}p
{
    line-height:2;
    word-wrap:break-word;
    white-space:normal
}dd,dt,li,pre,td,th
{
    line-height:1.5
}
li
{
    list-style-type:none
}
table
{
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
    empty-cells:show;
    font:100%;
    font-size:inherit;
    word-wrap:break-word;
    word-break:break-all
}
a
{
    color:#ffffff;
    text-decoration:none
}
a:hover
{
    text-decoration:none
}
.clearfix:after
{
    content:"";
    display:block;
    clear:both
}
.clearfix
{
    overflow:hidden;
    zoom:1
}
img
{
    max-width:100%;
    height:auto;
    vertical-align:middle;
    width:100%
}

.title
{
    color:#43232e;
    position:absolute;
    overflow:hidden;
    top:50%;
    -webkit-transform:translate3d(0, -50%, 0);
    transform:translate3d(0, -50%, 0);
    z-index:200;
    margin-left:11%
}
@media screen and (max-width:800px)

{
    .title
    {
        margin-left:40px
    }

    }
@media screen and (max-width:420px)
{
    .title
    {
        width:87.5%;
        margin:0 6.25%;
        top:auto;
        -webkit-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
        bottom:8rem
    }

    }
@media screen and (max-width:420px)
{
    .title--top
    {
        margin:0 13%
    }

    }
.title__text
{
    font-size:12rem;
    line-height:1;
    letter-spacing:0.1em;
    margin-bottom:1.6rem;
    font-family:"futura_m";
    font-weight:1000;
    text-shadow:0 10px 30px rgba(2, 11, 22, 0.5)
}
@media screen and (max-width:800px)
{
    .title__text
    {
        font-size:7.6rem
    }

    }
@media screen and (max-width:420px)
{
    .title__text
    {
        font-size:3.8rem;
        margin-bottom:0.8rem;
        text-shadow:0 3px 10px rgba(2, 11, 22, 0.5)
    }

    }
@media screen and (max-width:420px)
{
    .title__text--top
    {
        font-size:5.4rem;
        text-shadow:0 10px 30px rgba(2, 11, 22, 0.5);
        margin-bottom:0.1rem
    }

    }
.title .border
{
    display:inline-block;
    margin-bottom:3.2rem
}
@media screen and (max-width:420px)
{
    .title .border
    {
        margin-bottom:0.8rem
    }

    }
.title .border span
{
    display:block;
    width:88px;
    height:4px;
    border-radius:5px;
    background:#5a49f5
}
.title .border span:first-child
{
    margin-bottom:1.4rem
}
@media screen and (max-width:420px)
{
    .title .border span:first-child
    {
        margin-bottom:0.7rem
    }

    }
@media screen and (max-width:800px)
{
    .title .border span
    {
        width:70px
    }

    }
@media screen and (max-width:420px)
{
    .title .border span
    {
        width:44px;
        height:2px
    }

    }
.title .border span:last-child
{
    margin-left:54px
}
@media screen and (max-width:800px)
{
    .title .border span:last-child
    {
        margin-left:43px
    }

    }
@media screen and (max-width:420px)
{
    .title .border span:last-child
    {
        margin-left:27px
    }

    }
.title__lead
{
    /* #43232e */
    color:#000000;
    font-size:2.5rem;
    line-height:1.5;
    
    letter-spacing:0.1em
}
@media screen and (max-width:800px)
{
    .title__lead
    {
        font-size:2.4rem;
        line-height:1.4
    }

    }
@media screen and (max-width:420px)
{
    .title__lead
    {
        font-size:1.2rem
    }

    }
.title li
{
    margin-bottom:1.6rem
}
@media screen and (max-width:420px)
{
    .title li
    {
        margin-bottom:0.8rem;
        line-height:1.1
    }

    }
.title li:last-child
{
    margin-bottom:0
}
.title li:last-child a
{
    margin-right:3.2rem
}
@media screen and (max-width:420px)
{
    .title li:last-child a
    {
        margin-right:1.6rem
    }

    }
.title li:last-child a:last-child
{
    margin-right:0
}
.title li a
{
    color:#43232e;
    font-size:2.8rem;
    line-height:1.5;
    letter-spacing:0.1em;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s
}
@media screen and (max-width:800px)
{
    .title li a
    {
        font-size:2.4rem;
        line-height:1.4
    }

    }
@media screen and (max-width:420px)
{
    .title li a
    {
        font-size:1.2rem
    }

    }
.title li a:hover
{
    opacity:0.5
}
.btn
{
    display:inline-block;
    font-size:1.8rem;
    color:#43232e;
    background:#5a49f5;
    line-height:1;
    font-weight:bold;
    padding:18px 32px;
    border-radius:50px;
    -webkit-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
    letter-spacing:0.1em
}
@media screen and (max-width:800px)
{
    .btn
    {
        font-size:1.8rem;
        padding:13px 24px
    }

    }
@media screen and (max-width:420px)
{
    .btn
    {
        font-size:1.2rem
    }

    }
.btn:hover
{
    -webkit-transform:translate3d(0, -5%, 0);
    transform:translate3d(0, -5%, 0);
    opacity:1
}
.btn-wrap
{
    margin-top:3.2rem
}
@media screen and (max-width:800px)
{
    .btn-wrap
    {
        margin-top:1.6rem
    }

    }
@media screen and (max-width:420px)
{
    .btn-wrap
    {
        text-align:center;
        margin-top:0.8rem
    }

    }
.scrollDown
{
    position:fixed;
    font-size:1.4rem;
    bottom:80px;
    left:40px;
    line-height:1;
    letter-spacing:0.3em;
    -webkit-writing-mode:vertical-rl;
    -ms-writing-mode:tb-rl;
    writing-mode:vertical-rl;
    color:#43232e;
    z-index:100
}
.scrollDown:after
{
    content:"";
    width:2px;
    height:64px;
    background:#43232e;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    bottom:-80px
}@media screen and (max-width:420px)
{
    .scrollDown:after
    {
        height:32px;
        bottom:-40px
    }
    }
@media screen and (max-width:420px)
{
    .scrollDown
    {
        left:auto;
        right:6.25%;
        font-size:1rem;
        bottom:40px
    }
    }
.content
{
    max-width:1200px;
    width:100%;
    margin:auto
}
.content--mlarge
{
    margin-top:14.4rem;
}
@media screen and (max-width:800px)
{
    .content--mlarge
    {
        margin-top:7.2rem;
    }

    }
@media screen and (max-width:420px)
{
    .content--mlarge
    {
        margin-top:4rem;
    }

    }
@media screen and (max-width:1250px)
{
    .content
    {
        padding:0 10%;
    }

    }
.heading
{
    font-size:4rem;
    color:#43232e;
    letter-spacing:0.2em;
    font-weight: 600;
    font-family:"futura_m";
    margin-right:3.2rem;
    padding-top:1.2rem;
}
.heading--top
{
    padding-top:0;
}
@media screen and (max-width:420px)
{
    .heading--left
    {
        margin-left:auto;
    }

    }
@media screen and (max-width:800px)
{
    .heading
    {
        padding-top:0;
        margin-right:0;
    }

    }
@media screen and (max-width:420px)
{
    .heading
    {
        font-size:2.4rem;
        padding-top:0.2rem;
    }

    }
.heading-num
{
    font-size:4rem;
    color:#5a49f5;
    position:relative;
    padding-left:6.2rem;
    padding-right:3.2rem;
    font-family:"Abril Fatface";
    line-height:1.1;
}
.heading-num:after
{
    content:"";
    width:4.8rem;
    height:2px;
    background:#020b16;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}
@media screen and (max-width:420px)
{
    .heading-num:after
    {
        width:2.4rem;
    }

    }
@media screen and (max-width:420px)
{
    .heading-num
    {
        padding-left:3.2rem;
        font-size:2.4rem;
    }

    }
.sub-title
{
    font-size:3.2rem;
    margin-bottom:1.6rem;
    color:#43232e;
    text-align:center;
    letter-spacing:0.2em;
    line-height:1.2;
    font-weight:600;
    font-family:"futura_de";
    word-break:break-all;
}
@media screen and (max-width:420px)
{
    .sub-title
    {
        font-size:1.6rem;
        margin-bottom:0.8rem;
    }

    }
.small-title
{
    font-size:2.4rem;
    color:#43232e;
    letter-spacing:0.2em;
    line-height:1.2;
    font-family:"futura_de";
}
@media screen and (max-width:420px)
{
    .small-title
    {
        font-size:2.1rem;
    }

    }
@media screen and (max-width:420px)
{
    .small-title--skill
    {
        font-size:1.2rem;
    }

    }
.wrapper
{
    margin-bottom:20rem;
    position:relative;
    z-index:200;
}
@media screen and (max-width:420px)
{
    .wrapper
    {
        margin-bottom:12rem;
    }

    }
.back-arrow
{
    position:fixed;
    top:120px;
    left:40px;
    display:block;
    width:64px;
    -webkit-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
    overflow:hidden;
    color:#43232e;
    z-index:300;
}
@media screen and (max-width:420px)
{
    .back-arrow
    {
        width:32px;
        top:60px;
        left:6.25%;
    }

    }
.back-arrow:hover
{
    -webkit-transform:translate3d(-15%, 0, 0);
    transform:translate3d(-15%, 0, 0);
}
.back-arrow g
{
    stroke:currentColor;
}
.back-arrow.js-color
{
    color:#020b16;
}
.page-top
{
    width:100%;
    height:100vh;
    position:relative;
    color:#43232e;
    background:#ffffff;
}
@media screen and (max-width:420px)
{
    .page-top
    {
        display:block;
    }

    }
.page-top__inner
{
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
@media screen and (max-width:420px)
{
    .page-top__inner
    {
        display:block;
        max-height:761px;
        position:relative;
    }

    }
.page-top .image
{
    position:relative;
    width:60.677%;
    height:100vh;
    margin:0 0 0 auto;
    -webkit-box-shadow:none;
    box-shadow:none;
}
@media screen and (max-width:420px)
{
    .page-top .image
    {
        width:100%;
        height:65.492%;
        top:auto;
    }

    }
.page-top .image__project
{
    background:url(../img/project.png) no-repeat center;
    background-size:cover;
}
.page-top .image__about
{
    background:url(../img/me.jpg) no-repeat center;
    background-size:cover;
    background-color: #5a49f5;
}
.text
{
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-left:138px;
    margin-top:14.4rem;
}
@media screen and (max-width:800px)
{
    .text
    {
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        padding-left:0;
    }

    }
@media screen and (max-width:420px)
{
    .text
    {
        margin-top:7.2rem;
    }

    }
.text--top
{
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
}
.text .heading-num
{
    position:absolute;
    left:0
}
.text__wrap
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-right:10%;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    max-width:1200px;
    width:100%;
    margin:auto
}
.text__wrap--top
{
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start
}
@media screen and (max-width:800px)
{
    .text__wrap--top
    {
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }

    }
@media screen and (max-width:800px)
{
    .text__wrap
    {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        padding-left:10%
    }

    }
.text__works
{
    width:65.5%
}
@media screen and (max-width:800px)
{
    .text__works
    {
        width:100%;
        margin-top:7.2rem
    }

    }
@media screen and (max-width:420px)
{
    .text__works
    {
        margin-top:4rem
    }

    }
.container
{
    margin-top:20rem
}
@media screen and (max-width:420px)
{
    .container
    {
        margin-top:12rem
    }

    }
.curtain
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#020b16;
    z-index:99999;
    -webkit-transform:translate3d(0, 100%, 0);
    transform:translate3d(0, 100%, 0)
}
.loader
{
    position:fixed;
    width:100%;
    height:100%;
    background:#020b16;
    top:0;
    left:0
}
.loader.js-hidden
{
    display:none
}
header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:40px 40px 0;
    color:#43232e;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    z-index:1000
}
@media screen and (max-width:420px)
{
    header
    {
        padding:20px 6.25%
    }

    }
header.js-color a
{
    color:#020b16
}
header.js-color .menuIcon:after,header.js-color .menuIcon:before
{
    background:#020b16
}
header a
{
    color:#43232e;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s
}
header a:hover
{
    opacity:0.5
}
header .name
{
    font-size:2.4rem;
    letter-spacing:0.1em;
    position:relative;
    z-index:1000
}
@media screen and (max-width:420px)
{
    header .name
    {
        font-size:1.6rem
    }

    }
header .wrap
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position:relative
}
header .icons
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-right:6.4rem
}
@media screen and (max-width:420px)
{
    header .icons
    {
        display:none
    }

    }
header .icons a
{
    display:block;
    margin-right:3.2rem;
    font-size:2.4rem;
    letter-spacing:0.1em
}
header .icons a:last-child
{
    margin-right:0
}
header .menuIcon
{
    position:relative;
    width:50px;
    height:22px;
    cursor:pointer
}
@media screen and (max-width:420px)
{
    header .menuIcon
    {
        width:25px;
        height:15px
    }

    }
header .menuIcon:after,header .menuIcon:before
{
    content:"";
    width:100%;
    height:3px;
    background:#43232e;
    position:absolute;
    right:0;
    -webkit-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86)
}
header .menuIcon:after
{
    top:0
}
header .menuIcon:before
{
    bottom:0
}
header .menuIcon.js-menuOpen:after
{
    top:50%;
    -webkit-transform:rotate(45deg) translate3d(0, -50%, 0);
    transform:rotate(45deg) translate3d(0, -50%, 0)
}
header .menuIcon.js-menuOpen:before
{
    bottom:50%;
    -webkit-transform:rotate(-45deg) translate3d(0, 50%, 0);
    transform:rotate(-45deg) translate3d(0, 50%, 0)
}
header .global-nav
{
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(42%, #a05692), to(#5a49f5));
    background-image:-webkit-linear-gradient(left, #43232e, #a05692 42%, #5a49f5);
    background-image:-o-linear-gradient(left, #43232e, #a05692 42%, #5a49f5);
    background-image:linear-gradient(to right, #43232e, #a05692 42%, #5a49f5);
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transform:translate3d(0, -100%, 0);
    transform:translate3d(0, -100%, 0);
    z-index:-100
}
header .global-nav.js-open
{
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
header .global-nav.js-open a
{
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
header .global-nav__list
{
    text-align:center
}
header .global-nav__list li
{
    margin-top:7.2rem;
    position:relative;
    padding:0 153px;
    overflow:hidden
}
header .global-nav__list li:first-child
{
    margin-top:0
}
@media screen and (max-width:420px)
{
    header .global-nav__list li
    {
        padding:0;
        margin-top:3.2rem
    }

    }
header .global-nav__list a
{
    display:inline-block;
    color:#43232e;font-size:12rem;line-height:1;letter-spacing:0.1em;font-family:"futura_m";font-weight:normal;text-shadow:0 10px 30px rgba(2, 11, 22, 0.2);-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);-webkit-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s;-o-transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s;transition:0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s
}
@media screen and (max-width:800px)
{
    header .global-nav__list a
    {
        font-size:7.6rem
    }

    }
@media screen and (max-width:420px)
{
    header .global-nav__list a
    {
        font-size:3.8rem;text-shadow:0 3px 20px rgba(2, 11, 22, 0.2)
    }

    }
header .global-nav__list a:after
{
    content:"";width:0;height:10px;background:#43232e;position:absolute;left:0;top:40%;-webkit-box-shadow:0 10px 30px rgba(2, 11, 22, 0.2);box-shadow:0 10px 30px rgba(2, 11, 22, 0.2);-webkit-transition:0.3s cubic-bezier(0.77, 0, 0.175, 1);-o-transition:0.3s cubic-bezier(0.77, 0, 0.175, 1);transition:0.3s cubic-bezier(0.77, 0, 0.175, 1)
}
@media screen and (max-width:800px)
{
    header .global-nav__list a:after
    {
        display:none
    }

    }
header .global-nav__list a:hover
{
    opacity:1
}
header .global-nav__list a:hover:after
{
    width:100%
}
header .global-nav__sns
{
    display:none
}
@media screen and (max-width:420px)
{
    header .global-nav__sns
    {
        display:block
    }

    }
header .global-nav__sns a
{
    font-size:1.8rem;margin-right:2.4rem;-webkit-transform:translate3d(0, 150%, 0);transform:translate3d(0, 150%, 0)
}
header .global-nav__sns a:last-child
{
    margin-right:0
}
.background
{
    width:100%;height:100vh;overflow:hidden;
}
.sky-color
{
    position:fixed;
    width:100%;
    height:100vh;
    top:0;
    left:0;
    /* background-image:-webkit-gradient(linear, left top, left bottom, from(#43232e), color-stop(#061c37), color-stop(#07182b), color-stop(#061220), to(#020b16));
    background-image:-webkit-linear-gradient(top, #43232e, #061c37, #07182b, #061220, #020b16);
    background-image:-o-linear-gradient(top, #43232e, #061c37, #07182b, #061220, #020b16);
    background-image:linear-gradient(to bottom, #43232e, #061c37, #07182b, #061220, #020b16); */
    z-index:-200
}
.fullpage__slide
{
    width:100%;
    height:100vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    color:#43232e
}
@media screen and (max-width:420px)
{
    .fullpage__slide
    {
        display:block;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        max-height:761px
    }

    }
@media screen and (max-width:420px)
{
    .fp-section-1 .fullpage__slide
    {
        height:100%;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        margin:auto;
        max-height:667px;
    }

    }
#fp-nav
{
    margin:0;
    -webkit-transform:translate3d(0, -50%, 0);
    transform:translate3d(0, -50%, 0);
    width:40px;
    left:40px;
    overflow:hidden;
}
@media screen and (max-width:1250px)
{
    #fp-nav
    {
        width:auto;
        top:auto;
        left:50%;
        bottom:32px;
        -webkit-transform:translate3d(-50%, 0, 0);
        transform:translate3d(-50%, 0, 0);
    }

    }
@media screen and (max-width:420px)
{
    #fp-nav
    {
        bottom:20px
    }

    }
@media screen and (max-width:1250px)
{
    #fp-nav ul
    {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:end;
        -ms-flex-align:end;
        align-items:flex-end;
    }

    }
#fp-nav ul li
{
    height:3px;
    margin:0 0 40px;
}
@media screen and (max-width:1250px)
{
    #fp-nav ul li
    {
        height:auto;
        margin:0 28px;
    }

    }
@media screen and (max-width:420px)
{
    #fp-nav ul li
    {
        margin:0 12px;
    }

    }
#fp-nav ul li a
{
    width:24px;
    height:100%;
    background:#43232e;
    -webkit-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
#fp-nav ul li a span
{
    display:none;
}
@media screen and (max-width:1250px)
{
    #fp-nav ul li a
    {
        width:3px;
        height:24px;
    }

    }
@media screen and (max-width:420px)
{
    #fp-nav ul li a
    {
        width:2px;
        height:16px;
    }

    }
#fp-nav ul li:last-child
{
    margin-bottom:0
}
#fp-nav ul li .active
{
    width:40px
}
@media screen and (max-width:1250px)
{
    #fp-nav ul li .active
    {
        width:3px;
        height:40px
    }

    }
@media screen and (max-width:420px)
{
    #fp-nav ul li .active
    {
        width:2px;
        height:32px
    }

    }
.moon
{
    position:absolute;
    top:0;
    bottom:0;
    left:29.427%;
    margin:auto;
    height:1385px;
    width:1385px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
@media screen and (max-width:800px)
{
    .moon
    {
        width:100vw;
        height:100vw;
        left:23%
    }

    }
@media screen and (max-width:420px)
{
    .moon
    {
        width:165vw;
        height:165vw;
        left:50%;
        top:-10rem;
        bottom:auto;
        -webkit-transform:translate3d(-50%, 0, 0);
        transform:translate3d(-50%, 0, 0)
    }

    }
.moon__back
{
    z-index:-100
}
.moon__front
{
    z-index:200
}
.moon__text
{
    font-size:6.4rem;
    letter-spacing:0.1em;
    text-shadow:0 10px 15px rgba(2, 11, 22, 0.2);
    color:#ff4d5a;
    font-family:"futura_b"
}
@media screen and (max-width:800px)
{
    .moon__text
    {
        font-size:3.2rem
    }

    }
@media screen and (max-width:420px)
{
    .moon__text
    {
        font-size:2.4rem;
        text-shadow:0 4px 6px rgba(2, 11, 22, 0.2)
    }

    }
.moon__text-wrap
{
    position:absolute;
    left:-15.5963%;
    top:50%;
    -webkit-transform:translate3d(0, -50%, 0);
    transform:translate3d(0, -50%, 0);
}
.moon__text img{
    width:30.350180505%;
  
}
.moon__img
{
    position:relative;
    width:39.350180505%;
    height:39.350180505%;
}
.cloud
{
    position:absolute
}
.cloud--front1
{
    top:20.55045%;
    left:48%;
    width:140%;
}
.cloud--front2
{
    bottom:-18.53211%;
    right:-28.6238532%;
    width:87.155%;
}
.cloud--front3
{
    bottom:-5.137614678%;
    left:-49.357798%;
    width:87.155%;
}
.cloud--back1
{
    top:-22.38532%;
    right:-7.706422%;
    width:69.724%;
}
.cloud--back2
{
    top:-5.504587%;
    left:-38.715596%;
    width:87.155%;
}

.cloud--back3
{
    top:100.504587%;
    left:10.15596%;
    width:15.155%;
}
.cloud--front4
{
    top:-20%;
    left:83.715596%;
    width:87.155%;
}
.cloud--back4
{
    top:113.504587%;
    left:97.715596%;
    width:70.155%;
}
.cloud--front5
{
    top:-50%;
    left:-30.715596%;
    width:87.155%;
}
.cloud--back5
{
    top: 90%;
    left:-29.715596%;
    width:130.155%;
}
.cloud--front6
{
    top:-19%;
    left:-48.715596%;
    width:87.155%;
}


.image
{
    display:block;
    position:relative;
    width:53.125%;
    height:74.81%;
    margin:0 8% 0 auto;
    -webkit-box-shadow:0 80px 140px -40px rgba(0, 0, 0, 0.6);
    box-shadow:0 80px 140px -40px rgba(0, 0, 0, 0.6);
}
@media screen and (max-width:800px)
{
    .image
    {
        margin-right:40px
    }

    }
@media screen and (max-width:420px)
{
    .image
    {
        width:80%;
        height:55.633%;
        margin:0 10%;
        top:9.859%
    }

    }
.image__over
{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative
}
.image__cover
{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    right:0;
    background:#43232e;
    -webkit-transform:translate3d(100%, 0, 0);
    transform:translate3d(100%, 0, 0)
}
.image__cover:last-child
{
    background:#5a49f5
}
.image--works
{
    background:url(../img/project.png) no-repeat center; 
    background-color: #5a49f5;
    background-size:cover
}
.image--about
{
    background:url(../img/me.jpg) no-repeat center;
    background-color: #5a49f5;
    background-size:cover
}
.image--contact
{
    background:url(../img/hand.gif) no-repeat center;
    background-color: #5a49f5;
    background-size:cover
}
.image .page-num
{
    position:absolute;
    overflow-y:hidden;
    right:-7.5490%;
    bottom:12.3762%;
    font-size:15rem;
    color:#43232e;
    font-family:"Abril Fatface";
    z-index:200
}
@media screen and (max-width:800px)
{
    .image .page-num
    {
        font-size:7.5rem;
        right:-5%
    }

    }
@media screen and (max-width:420px)
{
    .image .page-num
    {
        display:none
    }

    }
.image .page-num p
{
    line-height:1.1;
    text-shadow:0 10px 30px rgba(2, 11, 22, 0.5)
}
@media screen and (max-width:420px)
{
    .image .page-num p
    {
        text-shadow:0 3px 10px rgba(2, 11, 22, 0.5)
    }

    }


    .moonlight
    {
        position:absolute;
        top:-14.1%;
        right:-8%;    
        margin:auto;
        z-index:-100;
     
    }
    @media screen and (max-width:800px)
    {
        .moonlight
        {
            width: 100%;
            height: 1005;
            left:10%;
            top:-10%;
        }
    
        }
    @media screen and (max-width:420px)
    {
        .moonlight
        {
            /* width:500vw;
            height:400vw; */
            left:60%;
            top:-20%;
            bottom:auto;
            -webkit-transform:translate3d(-50%, 0, 0);
            transform:translate3d(-50%, 0, 0)
        }
    
        }
    .moonlight__wrap
    {
        width: 1500px;
        height: 120vh;
        position: absolute;
        right:0;
        top:0;
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    .moonlight__img
    {
        
        background:url(../img/round.svg) no-repeat center ;
        background-size: 100%;
        overflow: visible;
            
    }
    .moon-background
    {
        position:fixed;
        top:0;
        left: 0;
        /* width: 100%; */
        width:100vw;
        height:100vh;
        z-index:-100;
    }
    @media screen and (max-width:420px)
    {
        .moon-background
        {
            height:100%;
            bottom:0;
            margin:auto;
            max-height:667px;
            }            }
                      

.star
{
    width:1300px;
    height:100vh;
    position:fixed;
    top:0;
    left:34%;
    z-index:-100
}
@media screen and (max-width:800px)
{
    .star
    {
        width:100vw;
        left:23%
    }

    }
@media screen and (max-width:420px)
{
    .star
    {
        left:23%;
        top: 10%;
    
    }

    }
.star__img
{
    width:100%;
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    justify-content: center;
    align-items: center;
        -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.star__img img
{
    width: 40%;
    border-radius: 50%;
   
}
@media screen and (max-width:420px)
{
    .star__img
    {
        display:block
    }

    }
@media screen and (max-width:420px)
{
    .star__img img
    {
        -webkit-transform:translate3d(0%, 39%, 0) scale(1.5);
        transform:translate3d(0%, 39%, 0) scale(1.5)
    }

    }
.layer
{
    width:100%;
    height:100%
}
.fp-tableCell
{
    position:relative
}
.meta
{
    padding-top:7.2rem;
    position:relative
}
.meta__back
{
    width:100%;
    height:70rem;
    background:#f2f4f5;
    position:absolute;
    top:0;
    left:0;
    z-index:-100
}
@media screen and (max-width:800px)
{
    .meta__back
    {
        height:54rem
    }

    }
@media screen and (max-width:420px)
{
    .meta__back
    {
        height:45rem
    }

    }
.meta__text-wrap
{
    padding:0 8.58333% 0
}
@media screen and (max-width:420px)
{
    .meta__text-wrap
    {
        padding:0 7.5% 0
    }

    }
.meta__text
{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:7.2rem
}
@media screen and (max-width:420px)
{
    .meta__text
    {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }

    }
.meta__text li
{
    margin-right:6.4rem
}
@media screen and (max-width:420px)
{
    .meta__text li
    {
        margin-right:0;
        margin-bottom:1.6rem
    }

    }
.meta__text li:last-child
{
    margin-right:0
}
@media screen and (max-width:420px)
{
    .meta__text li:last-child
    {
        margin-bottom:0
    }

    }
.meta__text .small-title
{
    margin-bottom:0.8rem
}
@media screen and (max-width:420px)
{
    .meta__text .small-title
    {
        margin-bottom:0.4rem
    }
    }
.big-image
{
    width:100%;
    height:116rem;
    background:url(../img/Perspective.jpg) no-repeat center;
    background-size:cover;
    margin-top:14.4rem
}
@media screen and (max-width:420px)
{   
    .big-image
    {   
        margin-top:7.2rem;
        height:50rem
    }

    }
.kamp
{   
    background:#f2f4f5;
    padding-top:20rem;
    margin-top:14.4rem
}
@media screen and (max-width:420px)
{   
    .kamp
    {   
        padding-top:7.2rem;
        margin-top:7.2rem
    }

    }
.kamp ul
{   
    width:76.666%;
    margin:0 auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.kamp li
{   
    width:47.5543%
}
.back-btn-wrap
{   
    text-align:center
}
.back-btn
{   
    display:inline-block;
    font-size:3.2rem;
    color:#020b16;
    letter-spacing:0.2em;
    position:relative;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
    -webkit-transform:translate3d(44px, 0, 0);
    transform:translate3d(44px, 0, 0)
}
@media screen and (max-width:420px)
{   
    .back-btn
    {   
        font-size:1.6rem;
        -webkit-transform:translate3d(22px, 0, 0);
        transform:translate3d(22px, 0, 0)
    }

    }
.back-btn:after
{   
    content:"";
    width:64px;
    height:2px;
    background:#020b16;
    position:absolute;
    top:0;
    bottom:0;
    left:-88px;
    margin:auto;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
@media screen and (max-width:420px)
{   
    .back-btn:after
    {   
        width:32px;
        left:-44px
    }

    }
.back-btn:before
{   
    content:"";
    width:24px;
    height:1px;
    background:#020b16;
    position:absolute;
    top:0;
    bottom:0;
    left:-88px;
    margin:auto;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
@media screen and (max-width:800px)
{   
    .back-btn:before
    {   
        width:12px;
        left:-44px;
        -webkit-transform:rotate(-45deg) translate3d(4px, -4px, 0);
        transform:rotate(-45deg) translate3d(4px, -4px, 0);
        display:none
    }

    }
.back-btn:hover
{   
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
.back-btn:hover:after
{   
    width:80px;
    left:-112px
}
.back-btn:hover:before
{   
    left:-112px;
    -webkit-transform:rotate(-45deg) translate3d(2px, -8px, 0);
    transform:rotate(-45deg) translate3d(2px, -8px, 0)
}
.who__wrap
{   
    width:48.333%
}
@media screen and (max-width:800px)
{   
    .who__wrap
    {   
        width:100%;
        margin-top:7.2rem
    }

    }
@media screen and (max-width:420px)
{   
    .who__wrap
    {   
        margin-top:4rem
    }

    }
.who__name
{   
    color:#43232e;
    margin-bottom:2.4rem
}
@media screen and (max-width:420px)
{   
    .who__name
    {   
        margin-bottom:1.6rem
    }

    }
.who__jp img
{   
    margin-top:-2rem;
    margin-bottom:1rem
}
@media screen and (max-width:420px)
{   
    .who__jp
    {   
        font-size:1.3rem
    }

    }
.who__en
{   
    font-size:1.8rem;
    letter-spacing:0.2em;
    font-family:"futura_de";
    line-height:1.3
}
@media screen and (max-width:420px)
{   
    .who__en
    {   
        font-size:1rem
    }

    }
.who__text
{   
    margin-bottom:6.4rem
}
@media screen and (max-width:420px)
{   
    .who__text
    {   
        margin-bottom:3.2rem
    }

    }
.who__image
{   
    -webkit-box-shadow:0px 63px 154px -20px rgba(7, 33, 66, 0.5);
    box-shadow:0px 63px 154px -20px rgba(7, 33, 66, 0.5)
}
@media screen and (max-width:420px)
{   
    .who__image
    {   
        -webkit-box-shadow:0px 33px 84px -20px rgba(7, 33, 66, 0.5);
        box-shadow:0px 33px 84px -20px rgba(7, 33, 66, 0.5)
    }

    }
.passion__list
{   
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
@media screen and (max-width:800px)
{   
    .passion__list
    {   
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start
    }

    }
.passion__item
{   
    width:29.75%
}
@media screen and (max-width:800px)
{   
    .passion__item
    {   
        width:100%;
        margin-top:6.4rem
    }
.passion__item:first-child
{   
    margin-top:0
}

}
@media screen and (max-width:420px)
{   
    .passion__item
    {   
        margin-top:3.2rem
    }

    }
.passion__image
{   
    width:42.016%;
    margin:0 auto 2.4rem
}
@media screen and (max-width:800px)
{   
    .passion__image
    {   
        width:24.429%
    }

    }
@media screen and (max-width:420px)
{   
    .passion__image
    {   
        margin-bottom:1.6rem
    }

    }
    /* project list */

    .project-title
{
    font-size:5rem;
    margin-bottom:1.6rem;
    color:#43232e;
    text-align:left;
    letter-spacing:0.2em;
    line-height:1.2;
    font-weight:600;
    font-family:"futura_de";
    word-break:break-all;
  
    
}
.left, .left .project-title{
    text-align: right;
}
@media screen and (max-width:420px)
{
    .project__item .project-title
    {
        font-size:2.9rem;
        margin-bottom:0.8rem;
    }
    .project__item  .project__text
    {
        font-size:2rem;
    }

    }
    @media screen and (max-width:800px)
    {   
        .project-title
    {
        font-size:3rem;
        margin-bottom:0.8rem;
    }
    .project__text
    {
        font-size:1rem;
        letter-spacing:0.5rem;
    }
    }
    .project__text
{
    font-size:2.4rem;
    color:#43232e;
    letter-spacing:0.2em;
    line-height:1.2;
    font-family:"futura_de";
    
   

}
@media screen and (max-width:420px)
{
    .small-title
    {
        font-size:2.1rem;
    }

    }
@media screen and (max-width:420px)
{
    .small-title--skill
    {
        font-size:1.2rem;
    }

    }
    .project__list
    {   
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    @media screen and (max-width:800px)
    {   
        .project__list
        {   
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
            -ms-flex-direction:column;
            flex-direction:column;
            -webkit-box-pack:start;
            -ms-flex-pack:start;
            justify-content:flex-start;
            
        }
    
        }
    .project__item
    {   
        
        width:48%
    }
    @media screen and (max-width:800px)
    {   
        .project__item
        {   
            width:100%;
            margin-top:6.4rem
        }
    .project__item:first-child
    {   
        margin-top:0
    }
    
    }
    @media screen and (max-width:420px)
    {   
        .project__item
        {   
            margin-top:3.2rem;
        }
    
        }
       
        .second_child::before{
        content:" ";
        background-color:#43232e;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 10%;
        left: 10%;
        z-index: -1;
        box-shadow: 2px 2px 100px #020b16;
        transition: 0.5s;
        }
    .project__image::before{
        content:" ";
        background-color:#5a49f5;
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: -10%;
        left: -10%;
        z-index: -1;
        box-shadow: -2px -2px 100px #020b16;
        transition: 0.5s;
    }
    .project__image:hover::before{
        background-color: #43232e;
        }
    .second_child:hover::before{
        background-color: #5a49f5;
        }

    .project__image, .second_child
    {   
        width:80%;
        position: relative;
        margin:0 auto 2.4rem;
    }
    @media screen and (max-width:800px)
    {   
        .project__image , .second_child
        {   
            width:90%;
        }
    
        }
    @media screen and (max-width:420px)
    {   
        .project__image
        {   
            margin-bottom:1.6rem;
        }
    
        }


    /* end */
.skill-set__flex
{   
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
@media screen and (max-width:800px)
{   
    .skill-set__flex
    {   
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start
    }

    }
.skill-set__list
{   
    width:47%
}
@media screen and (max-width:800px)
{   
    .skill-set__list
    {   
        width:100%
    }
.skill-set__list:last-child
{   
    margin-top:7.2rem
}

}
.skill-set__item
{   
    margin-top:6.4rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.skill-set__item:first-child
{   
    margin-top:0
}
@media screen and (max-width:420px)
{   
    .skill-set__item
    {   
        margin-top:3.2rem
    }

    }
.skill-set__icon
{   
    width:10.6382%;
    -ms-flex-item-align:center;
    align-self:center
}
.skill-set__detail
{   
    width:85.1063%
}
.skill-set__meta
{   
    margin-bottom:0.8rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.skill-set__name
{   
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:flex-end
}
.skill-set__year
{   
    font-size:1.4rem;
    line-height:1.2;
    color:#c0c5ca;
    margin-left:0.8rem;
    letter-spacing:0.2em
}
@media screen and (max-width:420px)
{   
    .skill-set__year
    {   
        font-size:1rem
    }

    }
.skill-set__ratio
{   
    font-size:1.6rem;
    line-height:1.2;
    color:#43232e
}
@media screen and (max-width:420px)
{   
    .skill-set__ratio
    {   
        font-size:1rem
    }

    }
.skill-set__high
{   
    color:#ff4d5a
}
.skill-set__bar
{   
    width:100%;
    height:1.4rem;
    background:#43232e;
    position:relative;
    border-radius:10px;
    -webkit-box-shadow:0 5px 15px 0 rgba(7, 33, 66, 0.15);
    box-shadow:0 5px 15px 0 rgba(7, 33, 66, 0.15)
}
@media screen and (max-width:420px)
{   
    .skill-set__bar
    {   
        height:0.7rem
    }

    }
.skill-set__bar:after
{   
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    border-radius:10px;
    width:10%
}
.skill-set__bar.p90:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(42%, #8c2b7a), to(#5a49f5));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 42%, #5a49f5);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 42%, #5a49f5);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 42%, #5a49f5)
}
.skill-set__bar.p90.in:after
{   
    -webkit-animation:ratio90 1.5s forwards;
    animation:ratio90 1.5s forwards
}
.skill-set__bar.p80:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(50%, #8c2b7a), to(#5a49f5));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 50%, #5a49f5);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 50%, #5a49f5);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 50%, #5a49f5)
}
.skill-set__bar.p80.in:after
{   
    -webkit-animation:ratio80 1.5s forwards;
    animation:ratio80 1.5s forwards
}
.skill-set__bar.p70:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(65%, #8c2b7a), to(#5a49f5));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 65%, #5a49f5);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 65%, #5a49f5);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 65%, #5a49f5)
}
.skill-set__bar.p70.in:after
{   
    -webkit-animation:ratio70 1.5s forwards;
    animation:ratio70 1.5s forwards
}
.skill-set__bar.p60:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(75%, #8c2b7a), to(#5a49f5));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 75%, #5a49f5);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 75%, #5a49f5);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 75%, #5a49f5)
}
.skill-set__bar.p60.in:after
{   
    -webkit-animation:ratio60 1.5s forwards;
    animation:ratio60 1.5s forwards
}
.skill-set__bar.p50:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(65%, #8c2b7a));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 65%);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 65%);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 65%)
}
.skill-set__bar.p50.in:after
{   
    -webkit-animation:ratio50 1.5s forwards;
    animation:ratio50 1.5s forwards
}
.skill-set__bar.p40:after
{   
    background-image:-webkit-gradient(linear, left top, right top, from(#43232e), color-stop(65%, #8c2b7a));
    background-image:-webkit-linear-gradient(left, #43232e, #8c2b7a 65%);
    background-image:-o-linear-gradient(left, #43232e, #8c2b7a 65%);
    background-image:linear-gradient(to right, #43232e, #8c2b7a 65%)
}
.skill-set__bar.p40.in:after
{   
    -webkit-animation:ratio40 1.5s forwards;
    animation:ratio40 1.5s forwards
}
.footer
{   
    width:100%;
    padding:20px 0;
    text-align:center;
    background-image:-webkit-linear-gradient(349deg, #43232e, #8c2b7a 52%, #5a49f5);
    background-image:-o-linear-gradient(349deg, #43232e, #8c2b7a 52%, #5a49f5);
    background-image:linear-gradient(1project01deg, #43232e, #8c2b7a 52%, #5a49f5);
    position:relative;
    z-index:100;
}
@media screen and (max-width:420px)
{   
    .footer
    {   
        padding:7.2rem 0
    }

    }
.footer a
{   
    display:block;
    font-size:2rem;
    line-height:1.3;
    color:#43232e;
    letter-spacing:0.2em;
    -webkit-transition:.3s;
    -o-transition:.3s;
    transition:.3s
}
@media screen and (max-width:420px)
{   
    .footer a
    {   
        font-size:1.2rem
    }

    }
.footer a:first-child
{   
    margin-bottom:2.4rem
}
@media screen and (max-width:420px)
{   
    .footer a:first-child
    {   
        margin-bottom:0.8rem
    }

    }
.footer a:hover
{   
    opacity:0.5
}
@-webkit-keyframes ratio90
{   
    0%
    {   
        width:10%
    }
to
{   
    width:90%
}

}
@keyframes ratio90
{   
    0%
    {   
        width:10%
    }
to
{   
    width:90%
}

}
@-webkit-keyframes ratio80
{   
    0%
    {   
        width:10%
    }
to
{   
    width:80%
}

}
@keyframes ratio80
{   
    0%
    {   
        width:10%
    }
to
{   
    width:80%
}

}
@-webkit-keyframes ratio70
{   
    0%
    {   
        width:10%
    }
to
{   
    width:70%
}

}
@keyframes ratio70
{   
    0%
    {   
        width:10%
    }
to
{   
    width:70%
}

}
@-webkit-keyframes ratio60
{   
    0%
    {   
        width:10%
    }
to
{   
    width:60%
}

}
@keyframes ratio60
{   
    0%
    {   
        width:10%
    }
to
{   
    width:60%
}

}
@-webkit-keyframes ratio50
{   
    0%
    {   
        width:10%
    }
to
{   
    width:50%
}

}
@keyframes ratio50
{   
    0%
    {   
        width:10%
    }
to
{   
    width:50%
}

}
@-webkit-keyframes ratio40
{   
    0%
    {   
        width:10%
    }
to
{   
    width:40%
}

}
@keyframes ratio40
{   
    0%
    {   
        width:10%
    }
to
{   
    width:40%
}
}

.margin
{
    margin-top: 150px;
}