@charset "utf-8";

html{
    overflow-x:hidden;
    padding:0;
    margin:0
}
body{
    font-family: mulish;
    font-size:15px;
    line-height:30px;
    letter-spacing:0;
    word-wrap:break-word;
    font-weight:400;
    background-color:#fff;
    color:#767676
}
body::-webkit-scrollbar{
    width:0
}
svg{
    fill:currentcolor;
    width:15px;
    height:15px
}
img.svg{
    width:15px;
    height:15px
}
::-webkit-input-placeholder{
    color:#6f6f6f
}
:-moz-placeholder{
    color:#6f6f6f;
    opacity:1
}
::-moz-placeholder{
    color:#6f6f6f;
    opacity:1
}
:-ms-input-placeholder{
    color:#6f6f6f
}
::-ms-input-placeholder{
    color:#6f6f6f
}
::placeholder{
    color:#6f6f6f
}
.container{
    max-width:1070px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:auto;
    padding:0 40px;
    position:relative;
    clear:both
}
h1,h2,h3,h4,h5,h6{
    font-weight:500;
    line-height:1.4;
    font-family:montserrat;
    color:#000
}
.links{
    color:darkturquoise;
    text-decoration: none;
}
.links:hover{
    color:rgb(233, 237, 32);
}
h1{
    font-size:45px
}
h2{
    font-size:36px
}
h3{
    font-size:30px
}
h4{
    font-size:24px
}
h5{
    font-size:20px
}
h6{
    font-size:16px
}
a{
    text-decoration:none
}
.mywebpage_all_wrap{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative
}
.mywebpage_all_wrap,.mywebpage_all_wrap *{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
#preloader{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    width:100%;
    z-index:99999;
    display:flex
}
#preloader:before,#preloader:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:50%;
    height:100%;
    z-index:-1;
    background-color:#000;
    -webkit-transition:all .3s ease 0s;
    -o-transition:all .3s ease 0s;
    transition:all .3s ease 0s
}
#preloader:after{
    left:auto;
    right:0
}
#preloader .loader_line{
    margin:auto;
    width:2px;
    height:250px;
    position:relative;
    overflow:hidden;
    -webkit-transition:all .8s ease 0s;
    -o-transition:all .8s ease 0s;
    transition:all .8s ease 0s
}
.loader_line:before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:0%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color:#fff;
    -webkit-animation:lineheight 1000ms ease-in-out 0s forwards;
    -o-animation:lineheight 1000ms ease-in-out 0s forwards;
    animation:lineheight 1000ms ease-in-out 0s forwards
}
.loader_line:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:100%;
    background-color:#767676;
    -webkit-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -o-transform:translateY(-100%);
    transform:translateY(-100%);
    -webkit-animation:lineround 1200ms linear 0s infinite;
    -o-animation:lineround 1200ms linear 0s infinite;
    animation:lineround 1200ms linear 0s infinite;
    animation-delay:2000ms
}
@keyframes lineheight{
    0%{
        height:0%
    }
    100%{
        height:100%
    }
}
@keyframes lineround{
    0%{
        -webkit-transform:translateY(-100%);
        -ms-transform:translateY(-100%);
        -o-transform:translateY(-100%);
        transform:translateY(-100%)
    }
    100%{
        -webkit-transform:translateY(200%);
        -ms-transform:translateY(200%);
        -o-transform:translateY(200%);
        transform:translateY(200%)
    }
}
.preloaded .loader_line:after{
    opacity:0
}
.preloaded .loader_line{
    opacity:0;
    height:100%!important
}
.preloaded:before,.preloaded:after{
    -webkit-animation:preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation:preloadedzero 300ms ease-in-out 500ms forwards;
    animation:preloadedzero 300ms ease-in-out 500ms forwards
}
@keyframes preloadedzero{
    0%{
        width:50%
    }
    100%{
        width:0%
    }
}
.mywebpage_topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:50px;
    background-color:#fff;
    z-index:14;
    display:none
}
.mywebpage_topbar .topbar_inner{
    width:100%;
    height:100%;
    clear:both;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 50px;
}
.mywebpage_topbar .logo img{
    max-width:150px;
    max-height:40px;
    padding-bottom: 5px;
}
.mywebpage_topbar .logo h3{
    font-weight:900;
    font-family:poppins;
    font-size:25px;
    letter-spacing:4px
}
.mywebpage_topbar .logo[data-type=image] img{
    display:inline-block
}
.mywebpage_topbar .logo[data-type=image] h3{
    display:none
}
.mywebpage_topbar .logo[data-type=text] img{
    display:none
}
.mywebpage_topbar .logo[data-type=text] h3{
    display:inline-block
}
.mywebpage_topbar .hamburger{
    padding:0
}
.mywebpage_topbar .hamburger-inner,.mywebpage_topbar .hamburger-inner:after,.mywebpage_topbar .hamburger-inner:before{
    width:30px;
    height:2px
}
.mywebpage_topbar .trigger{
    position:relative;
    top:5px
}
.mywebpage_topbar .hamburger-box{
    width:30px
}

.image-container {
    display: flex;
    justify-content: space-between;
}

.image-container img {
    width: 45px;
    height: 45px;
}
.mywebpage_mobile_menu{
    position:fixed;
    top:50px;
    right:-200px;
    height:100vh;
    width:200px;
    z-index:15;
    background-color:#fff;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_mobile_menu.opened{
    right:0;
}
.mywebpage_mobile_menu .menu_list{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    text-align:right;
    padding:100px 20px 0
}
.mywebpage_mobile_menu .menu_list ul{
    margin:0;
    list-style-type:none
}
.mywebpage_mobile_menu .menu_list ul li{
    margin:0 0 7px
}
.mywebpage_mobile_menu .menu_list ul li a{
    color:#000;
    font-family:montserrat
}
.mywebpage_all_wrap .leftpart{
    width:450px;
    height:100vh;
    position:fixed;
    display:flex;
    align-items:center;
    z-index:12;
    padding:0 100px;
    background-color:#fff
}
.mywebpage_all_wrap .leftpart_inner{
    width:100%;
    height:auto
}
.mywebpage_all_wrap .leftpart .logo img{
    max-width: 220px;
}
.mywebpage_all_wrap .leftpart .logo h3{
    font-family:poppins;
    font-weight:900;
    font-size:31px;
    letter-spacing:5px
}
.mywebpage_all_wrap .leftpart .logo[data-type=image] img{
    display:inline-block
}
.mywebpage_all_wrap .leftpart .logo[data-type=image] h3{
    display:none
}
.mywebpage_all_wrap .leftpart .logo[data-type=text] img{
    display:none
}
.mywebpage_all_wrap .leftpart .logo[data-type=text] h3{
    display:inline-block
}
.mywebpage_all_wrap .leftpart .menu{
    padding:50px 0;
    width:100%;
    float:left
}
.mywebpage_all_wrap .leftpart .menu ul{
    margin:0;
    list-style-type:none
}
.mywebpage_all_wrap .leftpart .menu ul li{
    margin:0;
    width:100%;
    float:left
}
.mywebpage_all_wrap .leftpart .menu ul li a{
    color:#767676;
    display:inline-block;
    font-weight:500;
    font-family:montserrat;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_all_wrap .leftpart .menu ul li a:hover{
    color:#000
}
.mywebpage_all_wrap .leftpart .menu ul li.active a{
    color:#000
}
.mywebpage_all_wrap .leftpart .copyright{
    width:100%;
    float:left
}
.mywebpage_all_wrap .leftpart .copyright p{
    font-size:15px;
    color:#999;
    font-family:montserrat;
    line-height:25px
}
.mywebpage_all_wrap .leftpart .copyright a{
    color:#787878;
    font-weight:500;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
}
.mywebpage_all_wrap .leftpart .copyright a:hover{
    color:#000;
}
.mywebpage_all_wrap .rightpart{
    width:100%;
    min-height:100vh;
    float:left;
    position:relative;
    background-color:#f8f8f8;
    padding-left:450px;
}
.mywebpage_all_wrap .rightpart_in{
    position:relative;
    width:100%;
    float:left;
    clear:both;
    border-left:1px solid #ebebeb;
    min-height:100vh
}
.mywebpage_section{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    overflow-y:scroll;
    opacity:0;
    visibility:hidden;
    z-index:8;
    transition:visibility 1s linear,opacity 0s linear;
    -moz-transition:visibility 1s linear,opacity 0s linear;
    -webkit-transition:visibility1s linear,opacity 0s linear;
    -o-transition:visibility 1s linear,opacity 0s linear
}
.mywebpage_section.animated{
    opacity:1;
    visibility:visible;
    z-index:9
}
.mywebpage_section.active{
    opacity:1;
    visibility:visible;
    z-index:10
}
.mywebpage_section.hidden{
    opacity:0;
    visibility:hidden;
    z-index:9
}
.mywebpage_section::-webkit-scrollbar{
    width:0
}
.mywebpage_home{
    width:100%;
    min-height:100vh;
    clear:both;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.mywebpage_home .home_content{
    display:flex;
    align-items:center
}
.mywebpage_home .avatar{
    min-width:350px;
    min-height:350px;
    position:relative;
    border-radius:100%
}
.mywebpage_home .avatar[data-type=square] .image{
    animation:none
}
.mywebpage_home .avatar[data-type=circle] .image{
    animation:none;
    border-radius:100%
}
.mywebpage_home .avatar .image{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    animation:morph 8s ease-in-out infinite 1s;
    background-blend-mode:multiply;
    -webkit-box-shadow:inset 0 0 0 10px #0ed77d68;
    -moz-box-shadow:inset 0 0 0 10px #0ed77d68;
    box-shadow:inset 0 0 0 10px #0ed77d68;
}
@keyframes morph{
    0%{
        border-radius:60% 40% 30% 70%/60% 30% 70% 40%
    }
    50%{
        border-radius:30% 60% 70% 40%/50% 60% 30% 60%
    }
    100%{
        border-radius:60% 40% 30% 70%/60% 30% 70% 40%
    }
}
.mywebpage_home .details{
    margin-left:80px
}
.mywebpage_home .details .name{
    font-size:55px;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:14px
}
.mywebpage_home .details .job{
    font-family:montserrat;
    font-weight:500;
    max-width:450px;
    margin-bottom:25px
}
.mywebpage_home .social{
    width:100%;
    float:left
}
.mywebpage_home .social ul{
    margin:0;
    list-style-type:none
}
.mywebpage_home .social ul li{
    margin:0 8px 0 0;
    display:inline-block
}
.mywebpage_home .social ul li:last-child{
    margin-right:0
}
.mywebpage_home .social ul li a{
    color:#000;
    font-size:60px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_home .social ul li a:hover{
    color:#000
}
.mywebpage_about{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0 40px 0;
}
.mywebpage_button{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_button a{
    color:#fff;
    display:inline-block;
    background-color:#000;
    padding:9px 40px 14px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_ebutton{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_ebutton{
    color:#fff;
    display:inline-block;
    background-color:#000;
    padding:9px 40px 14px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_about .top_author_image{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    margin-bottom:35px
}
.mywebpage_about .top_author_image img{
    min-width:100%
}
.mywebpage_about .about_title{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    border-bottom:1px solid #dfdfdf;
    padding-bottom:20px;
    margin-bottom:27px
}
.mywebpage_about .about_title h3{
    font-size:22px;
    font-weight:700
}
.mywebpage_about .about_text{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    border-bottom:1px solid #dfdfdf;
    padding-bottom:31px;
    margin-bottom:30px
}
.mywebpage_about .about_text p{
    margin-bottom:11px
}
.mywebpage_about .about_text p:last-child{
    margin-bottom:0
}
.tokyo_tm_short_info{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    display:flex;
    border-bottom:1px solid #dfdfdf;
    padding-bottom:30px;
    margin-bottom:40px
}
.tokyo_tm_short_info .left{
    width:50%;
    padding-right:50px
}
.tokyo_tm_short_info .right{
    width:50%;
    padding-left:50px
}
.tokyo_tm_info{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.tokyo_tm_info ul{
    margin:0;
    list-style-type:none
}
.tokyo_tm_info ul li{
    margin:0
}
.tokyo_tm_info ul li span:first-child{
    min-width:100px;
    float:left;
    margin-right:10px;
    font-weight:700;
    color:#000
}
.tokyo_tm_info ul li a{
    color:#767676;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.tokyo_tm_info ul li a:hover{
    color:#000
}
/*.tokyo_tm_progressbox{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    background-color:#fff;
    padding:93px 0 100px
}
.tokyo_tm_progressbox .in{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    display:flex
}
.tokyo_tm_progressbox .left{
    width:50%;
    padding-right:50px
}
.tokyo_tm_progressbox .right{
    width:50%;
    padding-left:50px
}
.tokyo_progress{
    width:100%;
    height:auto;
    clear:both;
    float:left
}*/
.progress_inner{
    width:100%;
    margin-bottom:17px
}
.progress_inner:last-child{
    margin-bottom:0
}
.progress_inner>span{
    margin:0 0 5px;
    width:100%;
    display:block;
    text-align:left;
    color:#000
}
.progress_inner span.number{
    float:right
}
.progress_inner .background{
    background:rgba(0,0,0,.09);
    width:100%;
    min-width:100%;
    position:relative;
    height:3px
}
.progress_inner .background .bar_in{
    background:#000;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
    bottom:0
}
.progress_inner .background .bar{
    width:100%;
    height:100%;
    position:relative
}
.tokyo_tm_skillbox{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:90px 0;
}
.tokyo_tm_skillbox .in{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    display:flex
}
.tokyo_tm_skillbox .left{
    width:50%;
    padding-right:50px
}
.tokyo_tm_skillbox .right{
    width:50%;
    padding-left:50px
}
.mywebpage_section_title{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    margin-bottom:40px
}
.mywebpage_section_title h3{
    font-size:20px;
    font-weight:700
}
.tokyo_tm_skill_list{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.tokyo_tm_skill_list ul{
    margin:0;
    list-style-type:none
}
.tokyo_tm_skill_list ul li{
    margin:0;
    padding-left:25px;
    position:relative
}
.tokyo_tm_skill_list ul li .svg{
    color:#000;
    width:10px;
    height:10px;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%)
}
.mywebpage_resumebox{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    background-color:#fff;
    padding:93px 0
}
.mywebpage_resumebox .in{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    display:flex
}
.mywebpage_resumebox .left{
    width:50%;
    padding-right:50px
}
.mywebpage_resumebox .right{
    width:50%;
    padding-left:50px
}
.mywebpage_resume_list{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_resume_list ul{
    margin:0;
    list-style-type:none;
    position:relative;
    display:inline-block;
    padding-top:10px
}
.mywebpage_resume_list ul:before{
    content:"";
    position:absolute;
    width:1px;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.07)
}
.mywebpage_resume_list ul li{
    margin:0;
    width:100%;
    float:left;
    position:relative;
    padding-left:20px;
    padding-bottom:45px
}
.mywebpage_resume_list ul li:last-child{
    padding-bottom:0
}
.mywebpage_resume_list ul li:before{
    content:"";
    position:absolute;
    height:18px;
    width:18px;
    background:#fff;
    border-radius:100%;
    border:solid 1px #ccc;
    left:-9px;
    top:8px
}
.mywebpage_resume_list ul li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    display:flex;
    position:relative
}
.mywebpage_resume_list ul li .time{
    width:50%;
    padding-right:20px
}
.mywebpage_resume_list ul li .time span{
    display:inline-block;
    padding:5px 25px;
    background-color:rgba(0,0,0,.05);
    border-radius:50px;
    font-size:14px;
    white-space:nowrap
}
.mywebpage_resume_list ul li .place{
    width:50%;
    padding-left:20px
}
.mywebpage_resume_list ul li .place h3{
    font-size:16px;
    margin-bottom:2px;
    font-weight:600
}
.mywebpage_resume_list ul li .place span{
    font-size:14px
}
.mywebpage_testimonials{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0
}
.mywebpage_testimonials .list{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    overflow:hidden
}
.mywebpage_testimonials .list ul{
    margin:0;
    list-style-type:none;
    cursor:e-resize
}
.mywebpage_testimonials .list ul li{
    margin:0
}
.mywebpage_testimonials .list ul li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative
}
.mywebpage_testimonials .list ul li .text{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    border:2px solid #e5edf4;
    padding:40px;
    margin-bottom:30px
}
.mywebpage_testimonials .list ul li .text:before{
    position:absolute;
    content:"";
    height:0;
    width:0;
    top:100%;
    left:50px;
    border:solid transparent;
    border-top-color:#e5edf4;
    border-width:18px 18px 0 0
}
.mywebpage_testimonials .list ul li .text:after{
    position:absolute;
    content:"";
    top:100%;
    left:50px;
    height:0;
    width:0;
    border:solid transparent;
    border-top-color:#f6fbff;
    border-width:14px 13px 0 0;
    margin-left:2px
}
.mywebpage_testimonials .list ul li .text i{
    position:absolute;
    z-index:1;
    font-size:30px;
    top:-29px;
    left:50px
}
.mywebpage_testimonials .details{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    display:flex;
    align-items:center;
    padding-left:20px
}
.mywebpage_testimonials .details .image{
    position:relative;
    width:60px;
    height:60px
}
.mywebpage_testimonials .details .image .main{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    border-radius:100%
}
.mywebpage_testimonials .details .info{
    padding-left:20px
}
.mywebpage_testimonials .details .info h3{
    font-size:16px;
    margin-bottom:2px;
    font-weight:600
}
.mywebpage_testimonials .details .info span{
    font-size:14px
}
.mywebpage_testimonials .owl-carousel .owl-stage-outer{
    overflow:hidden
}
.mywebpage_testimonials .owl-carousel .owl-stage-outer{
    overflow:visible
}
.mywebpage_testimonials .owl-item.active{
    opacity:1
}
.mywebpage_testimonials .owl-item{
    opacity:0
}
.mywebpage_services{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0
}
.mywebpage_services .list{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_services .list ul{
    margin:0 0 0 -40px;
    list-style-type:none;
    display:flex;
    flex-wrap:wrap
}
.mywebpage_services .list ul li{
    margin:0 0 40px;
    width:33.3333%;
    padding-left:40px
}
.mywebpage_services .list ul li .list_inner{
    width:100%;
    height:100%;
    clear:both;
    float:left;
    position:relative;
    border:1px solid rgba(0,0,0,.1);
    background-color:#fff;
    padding:45px 30px 40px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_services .list ul li .list_inner:hover{
    border:1px solid rgba(0,0,0,.2)
}
.mywebpage_services .list ul li .number{
    display:inline-block;
    margin-bottom:25px;
    position:relative;
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
    border-radius:100%;
    background-color:rgba(0,0,0,.03);
    font-weight:700;
    color:#000;
    font-family:montserrat;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_services .list ul li .list_inner:hover .number{
    background-color:rgba(0,0,0,.08)
}
.mywebpage_services .list ul li .title{
    font-weight:700;
    color:#000;
    font-size:18px;
    margin-bottom:15px
}
.mywebpage_services .list ul li .tokyo_tm_read_more{
    margin-top:7px
}
.mywebpage_services .list ul li .list_inner:hover .tokyo_tm_read_more a:before{
    animation:read-more-anim-2;
    animation-fill-mode:forwards;
    animation-duration:.4s;
    animation-timing-function:cubic-bezier(.6,.01,0,1)
}
.mywebpage_services .list ul li .list_inner:hover .tokyo_tm_read_more a span{
    transform:translateX(0%)
}
.mywebpage_services .popup_service_image{
    opacity:0;
    visibility:hidden;
    display:none;
    position:absolute;
    z-index:-111
}
.mywebpage_services .service_hidden_details{
    opacity:0;
    visibility:hidden;
    display:none;
    position:absolute;
    z-index:-111
}
.mywebpage_modalbox .service_popup_informations{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_modalbox .service_popup_informations .image{
    width:100%;
    float:left;
    position:relative;
    margin-bottom:37px
}
.mywebpage_modalbox .service_popup_informations .image img{
    position:relative;
    min-width:100%;
    opacity:0
}
.mywebpage_modalbox .service_popup_informations .image .main{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.mywebpage_modalbox .service_popup_informations .main_title{
    width:100%;
    float:left;
    margin-bottom:23px
}
.mywebpage_modalbox .service_popup_informations .main_title h3{
    font-size:23px;
    font-weight:600
}
.mywebpage_modalbox .service_popup_informations .descriptions{
    width:100%;
    float:left
}
.mywebpage_modalbox .service_popup_informations .descriptions p{
    margin-bottom:15px
}
.mywebpage_modalbox .service_popup_informations .descriptions p:last-child{
    margin-bottom:0
}
.mywebpage_skillsEd{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    background-color:#fff;
    padding:100px 0
}
.mywebpage_skillsEd .partners_inner{
    width:100%;
    float:left;
    clear:both;
    overflow:hidden;
    border:2px solid #eee
}
.mywebpage_skillsEd ul{
    margin:-2px -10px -2px -2px;
    list-style-type:none;
    padding-top:2px;
    float:left;
    padding-left:2px;
    min-width:calc(100% + 12px)
}
.mywebpage_skillsEd ul li{
    margin:0;
    float:left;
    width:25%;
    border:2px solid #eee;
    text-align:center;
    height:145px;
    line-height:145px;
    position:relative;
    margin-top:-2px;
    margin-left:-2px;
    overflow:hidden
}
.mywebpage_skillsEd ul li img{
    max-width:50%;
    max-height:100px
}
.mywebpage_skillsEd ul li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    opacity:.5;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_skillsEd ul li .list_inner:hover{
    opacity:1
}
.mywebpage_pricing{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0 60px;
    background-color:#fff
}
.mywebpage_pricing .mywebpage_button a{
    padding:6px 40px 11px
}
.mywebpage_pricing .list{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_pricing .list>ul{
    margin:0 0 0 -40px;
    list-style-type:none
}
.mywebpage_pricing .list>ul>li{
    margin:0 0 40px;
    padding-left:40px;
    width:33.3333%;
    float:left
}
.mywebpage_pricing .list>ul>li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    border:1px solid rgba(0,0,0,.1);
    padding:27px 40px 45px
}
.mywebpage_pricing .price{
    width:100%;
    float:left
}
.mywebpage_pricing .price h3{
    font-size:40px;
    font-weight:600
}
.mywebpage_pricing .price span{
    position:relative;
    display:inline-block
}
.mywebpage_pricing .price .currency{
    position:absolute!important;
    bottom:10px;
    right:-10px;
    font-size:15px
}
.mywebpage_pricing .plan{
    width:100%;
    float:left
}
.mywebpage_pricing .plan h3{
    font-weight:600;
    font-size:20px;
    border-bottom:1px solid rgba(0,0,0,.1);
    margin-bottom:20px;
    padding-bottom:20px
}
.mywebpage_pricing .item{
    margin:0;
    list-style-type:none
}
.mywebpage_pricing .item li{
    margin:0;
    opacity:.5
}
.mywebpage_pricing .item li.active{
    opacity:1
}
.mywebpage_pricing .mywebpage_button{
    margin-top:30px
}
.mywebpage_pricing .popular{
    position:absolute;
    display:inline-block;
    background-color:#000;
    color:#fff;
    font-size:13px;
    padding:0 20px 3px;
    top:-17px;
    right:10px
}
.mywebpage_facts{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0 60px
}
.mywebpage_facts .list{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_facts .list ul{
    margin:0 0 0 -40px;
    list-style-type:none
}
.mywebpage_facts .list ul li{
    margin:0 0 40px;
    padding-left:40px;
    width:33.333%;
    float:left
}
.mywebpage_facts .list ul li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    border:1px solid rgba(0,0,0,.1);
    text-align:center;
    padding:40px 20px
}
.mywebpage_facts .list h3{
    font-weight:600;
    font-size:20px;
    margin-bottom:3px
}
.mywebpage_title{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    margin-bottom:62px
}
.mywebpage_title h3{
    font-weight:800;
    font-family:montserrat
}
.mywebpage_title span{
    display:inline-block;
    background-color:rgba(0,0,0,.04);
    text-transform:uppercase;
    padding:4px 10px;
    font-weight:600;
    font-size:12px;
    color:#333;
    font-family:montserrat;
    letter-spacing:0;
    margin-bottom:11px
}
.mywebpage_title .title_flex{
    width:100%;
    height:auto;
    clear:both;
    display:flex;
    justify-content:space-between;
    align-items:flex-end
}
.tokyo_tm_portfolio .portfolio_filter ul{
    margin:0;
    list-style-type:none
}
.tokyo_tm_portfolio .portfolio_filter ul li{
    margin:0 25px 0 0;
    display:inline-block
}
.tokyo_tm_portfolio .portfolio_filter ul li:last-child{
    margin-right:0
}
.tokyo_tm_portfolio .portfolio_filter ul li a{
    color:#767676;
    display:inline-block;
    font-weight:500;
    font-family:montserrat;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.tokyo_tm_portfolio .portfolio_filter ul li a.current{
    color:#000
}
.tokyo_tm_portfolio .portfolio_filter ul li a:hover{
    color:#000
}
.tokyo_tm_portfolio .list_wrapper{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.tokyo_tm_portfolio{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0 40px
}
.tokyo_tm_portfolio .portfolio_list{
    margin:0 0 0 -40px;
    list-style-type:none
}
.tokyo_tm_portfolio .portfolio_list li{
    margin:0 0 40px;
    float:left;
    width:33.3333%;
    padding-left:40px
}
.tokyo_tm_portfolio .portfolio_list li .inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    overflow:hidden;
    position:relative
}
.tokyo_tm_portfolio .portfolio_list li .inner img{
    opacity:0;
    min-width:100%
}
.tokyo_tm_portfolio .portfolio_list li .inner .abs_image{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.tokyo_tm_portfolio .portfolio_list li .inner:hover .abs_image{
    transform:scale(1.1) translateZ(0)
}
.tokyo_tm_portfolio_titles{
    white-space:nowrap;
    background:#fff;
    font-size:18px;
    padding:5px 15px;
    font-family:montserrat;
    font-weight:600;
    color:#000;
    position:fixed;
    z-index:15;
    opacity:0;
    visibility:hidden
}
.tokyo_tm_portfolio_titles.visible{
    opacity:1;
    visibility:visible
}
.tokyo_tm_portfolio_titles .work__cat{
    position:absolute;
    background:#fff;
    top:100%;
    left:0;
    margin-top:-10px;
    font-family:mulish;
    font-weight:500;
    padding:5px 15px;
    color:#767676;
    font-size:15px
}
.entry{
    position:relative
}
.tokyo_tm_portfolio .popup_details{
    opacity:0;
    visibility:hidden;
    position:absolute;
    z-index:-11;
    display:none
}
.mywebpage_modalbox .details_all_wrap{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_modalbox .popup_details{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_modalbox .popup_details .top_image{
    position:relative;
    overflow:hidden;
    margin-bottom:37px
}
.mywebpage_modalbox .popup_details .top_image img{
    position:relative;
    min-width:100%;
    opacity:0
}
.mywebpage_modalbox .popup_details .top_image .main{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat
}
.mywebpage_modalbox .portfolio_main_title{
    width:100%;
    float:left;
    margin-bottom:28px
}
.mywebpage_modalbox .portfolio_main_title h3{
    font-weight:700;
    font-size:23px;
    margin-bottom:5px
}
.mywebpage_modalbox .main_details{
    width:100%;
    height:auto;
    clear:both;
    display:flex;
    margin-bottom:90px
}
.mywebpage_modalbox .main_details .textbox{
    width:70%;
    padding-right:40px
}
.mywebpage_modalbox .main_details .textbox p{
    margin-bottom:18px
}
.mywebpage_modalbox .main_details .textbox p:last-child{
    margin-bottom:0
}
.mywebpage_modalbox .main_details .detailbox{
    width:30%;
    padding-left:40px
}
.mywebpage_modalbox .main_details .detailbox>ul{
    margin:0;
    list-style-type:none
}
.mywebpage_modalbox .main_details .detailbox>ul>li{
    margin:0 0 8px;
    width:100%;
    float:left
}
.mywebpage_modalbox .main_details .detailbox>ul>li:last-child{
    margin-bottom:0
}
.mywebpage_modalbox .main_details .detailbox .first{
    font-weight:700;
    display:block;
    color:#000;
    margin-bottom:3px
}
.mywebpage_modalbox .main_details .detailbox span a{
    color:#767676;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_modalbox .main_details .detailbox span a:hover{
    color:#000
}
.mywebpage_modalbox .main_details .detailbox .share{
    margin:0;
    list-style-type:none;
    position:relative;
    top:7px
}
.mywebpage_modalbox .main_details .detailbox .share li{
    margin:0 5px 0 0;
    display:inline-block
}
.mywebpage_modalbox .main_details .detailbox .share li:last-child{
    margin-right:0
}
.mywebpage_modalbox .main_details .detailbox .share li a{
    color:#000;
    font-size:18px
}
.mywebpage_modalbox .additional_images{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_modalbox .additional_images ul{
    margin:0 0 0 -30px;
    list-style-type:none
}
.mywebpage_modalbox .additional_images ul li{
    margin:0 0 30px;
    float:left;
    width:50%;
    padding-left:30px
}
.mywebpage_modalbox .additional_images ul li:nth-child(3n-2){
    width:100%
}
.mywebpage_modalbox .additional_images ul li .list_inner{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative
}
.mywebpage_modalbox .additional_images ul li .my_image{
    position:relative
}
.mywebpage_modalbox .additional_images ul li .my_image img{
    opacity:0;
    min-width:100%
}
.mywebpage_modalbox .additional_images ul li .my_image .main{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center
}
.mywebpage_news{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0 45px
}
.mywebpage_news ul{
    margin:0 0 0 -50px;
    list-style-type:none
}
.mywebpage_news ul li{
    margin:0 0 50px;
    float:left;
    width:50%;
    padding-left:50px
}
.mywebpage_news ul li .list_inner{
    width:100%;
    height:100%;
    clear:both;
    float:left;
    position:relative;
    box-shadow:0 0 20px rgba(0,0,0,.07)
}
.mywebpage_news ul li .image{
    position:relative;
    overflow:hidden
}
.mywebpage_news ul li .image img{
    min-width:100%;
    opacity:0
}
.mywebpage_news ul li .image .main{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_news ul li .list_inner .image:hover .main{
    transform:scale(1.1) translateZ(0)
}
.mywebpage_news ul li .details{
    width:100%;
    float:left;
    padding:30px 40px 25px;
    background-color:#fff;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_news ul li .list_inner:hover .details{
    box-shadow:0 0 20px rgba(0,0,0,.12)
}
.mywebpage_news ul li .details .title{
    margin-bottom:10px;
    line-height:1.4
}
.mywebpage_news ul li .details .title a{
    color:#000;
    font-size:18px;
    font-weight:600;
    display:inline-block;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_news ul li .details .title a:hover{
    color:#000
}
.mywebpage_news ul li .details .date{
    font-family:montserrat;
    font-size:13px;
    color:#767676
}
.mywebpage_news ul li .details .date a{
    color:#767676;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_news ul li .details .date a:hover{
    color:#000
}
.mywebpage_news ul li .details .date span{
    position:relative
}
.mywebpage_news ul li .details .date span:before{
    position:relative;
    content:"/";
    font-size:10px;
    padding:0 7px 0 2px
}
.mywebpage_news ul li .extra{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
    position:relative
}
.mywebpage_news ul li .extra:before{
    position:absolute;
    content:"";
    width:100%;
    height:1px;
    background-color:rgba(0,0,0,.1);
    bottom:-7px
}
.tokyo_tm_read_more{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    overflow:hidden
}
.tokyo_tm_read_more a{
    display:inline-block;
    overflow:hidden;
    color:#000;
    padding-right:32px;
    position:relative;
    text-transform:uppercase;
    font-weight:500;
    font-size:12px;
    font-family:montserrat
}
.tokyo_tm_read_more a:before{
    position:absolute;
    content:'';
    background-color:#000;
    margin:auto;
    width:100%;
    height:1px;
    top:0;
    left:0;
    bottom:0;
    transform:scaleX(.2);
    transform-origin:left center;
    animation:read-more-anim;
    animation-fill-mode:forwards;
    animation-duration:.4s;
    animation-timing-function:cubic-bezier(.6,.01,0,1)
}
.tokyo_tm_read_more a span{
    display:inline-block;
    position:relative;
    background-color:#fff;
    z-index:1;
    transition:.6s cubic-bezier(.6,.01,0,1);
    transform:translateX(-110%)
}
.mywebpage_news ul li .list_inner:hover .tokyo_tm_read_more a:before{
    animation:read-more-anim-2;
    animation-fill-mode:forwards;
    animation-duration:.4s;
    animation-timing-function:cubic-bezier(.6,.01,0,1)
}
.mywebpage_news ul li .list_inner:hover .tokyo_tm_read_more a span{
    transform:translateX(0%)
}
@keyframes read-more-anim{
    0%{
        transform-origin:right center;
        transform:scaleX(.2)
    }
    70%{
        transform-origin:right center
    }
    71%{
        transform-origin:left center;
        transform:scaleX(1)
    }
    100%{
        transform-origin:left center;
        transform:scaleX(.2)
    }
}
@keyframes read-more-anim-2{
    0%{
        transform-origin:left center;
        transform:scaleX(.2)
    }
    70%{
        transform-origin:left center;
        transform:scaleX(1)
    }
    71%{
        transform-origin:right center
    }
    100%{
        transform-origin:right center;
        transform:scaleX(.2)
    }
}
.wave {
    animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;        /* Change to speed up or slow down */
    animation-iteration-count: infinite;  /* Never stop waving :) */
    transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
    display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
    10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
    20% { transform: rotate(-8.0deg) }
    30% { transform: rotate(14.0deg) }
    0% { transform: rotate(-4.0deg) }
    50% { transform: rotate(10.0deg) }
    60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
    100% { transform: rotate( 0.0deg) }
}

.emoji {
    font-size: calc(200px + 8vw);
    min-width: 2.8em;
    margin: 0.1em 0.1em;
    text-align: center;
}

.emoji::after {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mailbox::after {
    content: '📪';
    animation-name: mailbox;
    animation-duration: 2.5s;
}

@keyframes mailbox {
    25% {
        content: '📫';
    }

    50% {
        content: '📬';
    }

    75% {
        content: '📭';
    }
}

.tokyo_tm_progressbox .image-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
}
.tokyo_tm_progressbox .image-list li {
    margin: 10px;
}

.mywebpage_modalbox .details .extra{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    margin-bottom:30px
}
.mywebpage_modalbox .details .extra:before{
    position:absolute;
    content:"";
    width:100%;
    height:1px;
    background-color:rgba(0,0,0,.1);
    bottom:-10px
}
.mywebpage_modalbox .tokyo_tm_read_more{
    display:none
}
.tokyo_tm_full_link{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:4
}
.mywebpage_modalbox{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100vh;
    z-index:15;
    background-color:rgba(0,0,0,.8);
    opacity:0;
    visibility:hidden;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_modalbox.opened{
    opacity:1;
    visibility:visible
}
.mywebpage_modalbox .container{
    height:100vh
}
.mywebpage_modalbox .box_inner{
    position:absolute;
    top:70px;
    bottom:70px;
    width:968px;
    left:50%;
    transform:translateX(-50%);
    background-color:#fff;
    z-index:1;
    opacity:0;
    visibility:hidden;
    margin-top:-20px;
    transition-delay:.3s;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_modalbox.opened .box_inner{
    opacity:1;
    visibility:visible;
    margin-top:0
}
.mywebpage_modalbox .close{
    position:fixed;
    left:100%;
    top:0;
    margin-left:30px;
    z-index:10
}
.mywebpage_modalbox .close a{
    display:block;
    width:40px;
    height:40px;
    color:#fff;
    border:2px solid #fff;
    border-radius:10px;
    position:relative;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_modalbox .close a:hover{
    border-radius:100%
}
.mywebpage_modalbox .close a i{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.mywebpage_modalbox .description_wrap{
    position:relative;
    width:100%;
    height:100%;
    float:left;
    overflow:hidden;
    padding:50px;
    overflow-y:scroll
}
.mywebpage_modalbox .description_wrap:after{
    position:fixed;
    content:"";
    right:0;
    left:0;
    bottom:0;
    height:50px;
    background-color:#fff;
    z-index:3
}
.mywebpage_modalbox .description_wrap:before{
    position:fixed;
    content:"";
    right:0;
    left:0;
    top:0;
    height:50px;
    background-color:#fff;
    z-index:3
}
.mywebpage_modalbox .details{
    width:100%;
    float:left;
    margin-bottom:20px
}
.mywebpage_modalbox .description_wrap .image{
    position:relative;
    z-index:-1;
    margin-bottom:40px
}
.mywebpage_modalbox .description_wrap .image img{
    min-width:100%
}
.mywebpage_modalbox .description_wrap .image .main{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover
}
.mywebpage_modalbox .details .title{
    font-weight:600;
    font-size:23px;
    margin-bottom:9px
}
.mywebpage_modalbox .date{
    text-transform:uppercase;
    font-family:montserrat;
    font-size:12px;
    color:#767676
}
.mywebpage_modalbox .date a{
    color:#767676;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.mywebpage_modalbox .date a:hover{
    color:#000
}
.mywebpage_modalbox .date span{
    position:relative;
    margin-left:11px
}
.mywebpage_modalbox .date span:before{
    position:absolute;
    content:"";
    margin-top:0;
    top:50%;
    transform:translateY(-50%) rotate(15deg);
    right:100%;
    background-color:#939393;
    width:1px;
    height:9px;
    margin-right:7px
}
.mywebpage_news .main_content{
    opacity:0;
    visibility:hidden;
    position:absolute;
    z-index:-11;
    display:none
}
body.modal{
    overflow-y:hidden
}
.mywebpage_modalbox .main_content{
    width:100%;
    float:left
}
.mywebpage_modalbox .main_content .descriptions{
    width:100%;
    float:left
}
.mywebpage_modalbox .main_content .descriptions .bigger{
    color:#888;
    font-size:20px;
    margin-bottom:31px
}
.mywebpage_modalbox .main_content .descriptions p{
    margin-bottom:22px
}
.mywebpage_modalbox .main_content .descriptions p:last-child{
    margin-bottom:0
}
.mywebpage_modalbox .main_content .quotebox{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    position:relative;
    padding-left:70px;
    margin-bottom:24px
}
.mywebpage_modalbox .main_content .quotebox p{
    font-size:20px;
    margin-bottom:23px
}
.mywebpage_modalbox .main_content .icon{
    position:absolute;
    left:0;
    top:5px
}
.mywebpage_modalbox .main_content .icon i{
    font-size:40px;
    color:#000
}
.mywebpage_modalbox .description_wrap::-webkit-scrollbar{
    width:11px
}
.mywebpage_modalbox .description_wrap{
    scrollbar-width:thin;
    scrollbar-color:#999 #fff
}
.mywebpage_modalbox .description_wrap:-webkit-scrollbar-track{
    background:#fff
}
.mywebpage_modalbox .description_wrap::-webkit-scrollbar-thumb{
    background-color:#999;
    border-radius:6px;
    border:3px solid #fff
}
.mywebpage_contact{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    padding:100px 0
}
.mywebpage_contact .map_wrap{
    width:100%;
    height:auto;
    clear:both;
    float:left;
    margin-bottom:50px
}
.mywebpage_contact .fields{
    width:100%;
    height:auto;
    clear:both;
    float:left
}
.mywebpage_contact .fields .first{
    width:100%;
    float:left
}
.mywebpage_contact .fields ul{
    margin:0;
    list-style-type:none
}
.mywebpage_contact .fields ul li{
    width:100%;
    margin:0 0 30px;
    float:left
}
.mywebpage_contact .fields ul li input{
    width:100%;
    border:1px solid rgba(0,0,0,.2);
    background-color:transparent
}
.mywebpage_contact .fields ul li input:focus{
    outline:none;
    border:1px solid rgba(0,0,0,.5)
}
.mywebpage_contact .fields .last textarea{
    width:100%;
    border:1px solid rgba(0,0,0,.2);
    height:120px;
    resize:none;
    margin-bottom:20px;
    background-color:transparent
}
.mywebpage_contact .fields .last textarea:focus{
    outline:none;
    border:1px solid rgba(0,0,0,.5)
}
.mywebpage_contact .empty_notice{
    color:#f52225;
    margin-bottom:7px;
    display:none;
    text-align:left;
    font-weight:500
}
.mywebpage_contact .contact_error{
    color:#f52225;
    text-align:left;
    font-weight:500
}
.mywebpage_contact .returnmessage{
    color:#3a00ff;
    margin-bottom:7px;
    text-align:left;
    font-weight:500
}
.mywebpage_all_wrap[data-magic-cursor=hide] .mouse-cursor{
    display:none
}
.mouse-cursor{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    border-radius:50%;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    visibility:hidden;
}
.cursor-inner{
    margin-left:-3px;
    margin-top:-3px;
    width:6px;
    height:6px;
    z-index:50;
    background-color:#000;
    -webkit-transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;
    transition:width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out
}
.cursor-inner.cursor-hover{
    margin-left:-40px;
    margin-top:-40px;
    width:80px;
    height:80px;
    background-color:#000;
    opacity:.3;
}
.cursor-outer{
    margin-left:-15px;
    margin-top:-15px;
    width:30px;
    height:30px;
    border:2px solid #000;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    z-index:50;
    opacity:.5;
    -webkit-transition:all .08s ease-out;
    transition:all .08s ease-out;
}
.cursor-outer.cursor-hover{
    opacity:0;
}
.tokyo_tm_intro .short_info{
    position:fixed;
    top:10%;
    width:100%;
    text-align:center;
}
.tokyo_tm_intro .short_info img{
    margin-bottom:25px
}
.tokyo_tm_intro .short_info h3{
    font-size:20px;
    color:#767676
}
.tokyo_tm_intro{
    width:100%;
    height:100vh;
    clear:both;
    float:left;
    position:relative
}
.tokyo_tm_intro .demos{
    width:100%;
    height:100%;
    clear:both;
    display:flex;
    align-items:center;
    text-align:center;
    position:relative
}
.tokyo_tm_intro .left,.tokyo_tm_intro .right{
    width:50%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.tokyo_tm_intro .demos img{
    max-width:400px;
    margin-bottom:25px
}
.tokyo_tm_intro .desc{
    position:relative;
    top:0;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease
}
.tokyo_tm_intro .desc h3{
    font-size:20px;
    font-weight:800
}
.tokyo_tm_intro .intro_line,.tokyo_tm_intro .intro_line_2,.tokyo_tm_intro .intro_line_3{
    position:fixed;
    top:0;
    width:1px;
    height:200%;
    left:50%;
    transform:translateY(-50%);
    z-index:-1;
    background-color:rgba(0,0,0,.06)
}
.tokyo_tm_intro .intro_line{
    left:25%
}
.tokyo_tm_intro .intro_line_2{
    left:50%;
    transform:translateY(-50%)
}
.tokyo_tm_intro .intro_line_3{
    left:75%
}
.tokyo_tm_intro .intro_link{
    position:absolute;
    z-index:2;
    top:0;
    bottom:0;
    left:0;
    right:0
}
.tokyo_tm_intro .left:hover .desc{
    top:-20px
}
.tokyo_tm_intro .right:hover .desc{
    top:-20px
}
.tokyo_tm_intro_fixed_price .pricing-info,.tokyo_tm_intro_fixed_price .anim{
    text-decoration:none;
    color:#fff;
    font-family:montserrat;
    background-color:#e54b4b;
    position:fixed;
    font-size:22px;
    text-align:center;
    z-index:3;
    border-radius:100%;
    height:70px;
    width:70px;
    line-height:70px;
    display:inline-block;
    left:50%;
    bottom:10%;
    margin-left:-35px;
    font-weight:600;
    -webkit-transition:all .2s;
    -moz-transition:all .2s;
    -ms-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
@-webkit-keyframes myAnim{
    0%{
        -webkit-transform:scale(.1);
        transform:scale(.1);
        opacity:0
    }
    50%{
        opacity:.3
    }
    100%{
        -webkit-transform:scale(2);
        transform:scale(2);
        opacity:0
    }
}
@keyframes myAnim{
    0%{
        -webkit-transform:scale(.1);
        transform:scale(.1);
        opacity:0
    }
    50%{
        opacity:.3
    }
    100%{
        -webkit-transform:scale(2);
        transform:scale(2);
        opacity:0
    }
}
.tokyo_tm_intro_fixed_price .anim:nth-child(1){
    -webkit-animation:myAnim 2s infinite;
    animation:myAnim 2s infinite
}
.tokyo_tm_intro_fixed_price .anim:nth-child(2){
    -webkit-animation:myAnim 2s infinite .3s;
    animation:myAnim 2s infinite .3s
}
.tokyo_tm_intro_fixed_price .anim:nth-child(3){
    -webkit-animation:myAnim 2s infinite .6s;
    animation:myAnim 2s infinite .6s
}
@media(max-width:1600px){
    .container{
        max-width:968px
    }
    .mywebpage_all_wrap .leftpart{
        width:400px
    }
    .mywebpage_all_wrap .rightpart{
        padding-left:350px
    }
    .mywebpage_all_wrap .leftpart{
        width:350px;
        padding:0 70px
    }
    .mywebpage_home .avatar{
        min-width:250px;
        min-height:250px
    }
    .mywebpage_home .details .name{
        font-size:44px;
        margin-bottom:10px
    }
    .mywebpage_home .details .job{
        margin-top: 10px;
        margin-bottom:22px;
    }
    .mywebpage_modalbox .box_inner{
        width:850px;
    }
}
@media(max-width:1200px){
    .mywebpage_topbar{
        display:block
    }
    .mywebpage_section{
        padding-left:0
    }
    .mywebpage_all_wrap .leftpart{
        display:none
    }
    .mywebpage_all_wrap .rightpart{
        padding-left:0
    }
    .mywebpage_all_wrap .rightpart_in{
        border-left:none
    }
    .mywebpage_about{
        padding-top:130px
    }
    .tokyo_tm_portfolio{
        padding-top:130px
    }
    .mywebpage_contact{
        padding-top:130px
    }
    .mywebpage_news{
        padding-top:130px
    }
    .mywebpage_services{
        padding-top:130px
    }
    .mywebpage_modalbox .description_wrap{
        padding:40px
    }
    .mywebpage_modalbox .box_inner{
        width:500px
    }
    .mywebpage_modalbox .main_details{
        flex-direction:column;
    }
    .details .job{
        display:inline-flex;
    }
    .mywebpage_modalbox .main_details .textbox{
        padding-right:0;
        width:100%;
        margin-bottom:30px
    }
    .mywebpage_modalbox .main_details .detailbox{
        padding-left:0;
        width:100%
    }
    .mywebpage_modalbox .additional_images ul{
        margin:0
    }
    .mywebpage_modalbox .additional_images ul li{
        padding-left:0;
        width:100%
    }
    .mywebpage_modalbox .description_wrap:after{
        height:40px
    }
    .mywebpage_modalbox .description_wrap:before{
        height:40px
    }
}
@media(max-width:1040px){
    .mouse-cursor{
        display:none
    }
    .mywebpage_home .home_content{
        flex-direction:column;
        text-align:center;
    }
    .mywebpage_home .avatar{
        margin-bottom:30px
    }
    .mywebpage_home .details{
        margin-left:0;
        margin-right: 0;
    }
    .details .job{
        display:inline-flex;
    }
    .mywebpage_title .title_flex{
        flex-direction:column;
        align-items:flex-start
    }
    .mywebpage_title .portfolio_filter{
        padding-top:48px
    }
    .container{
        padding:0 20px
    }
    .mywebpage_services .list ul li{
        width:50%
    }
    .mywebpage_skillsEd ul li{
        width:33.3333%
    }
    .mywebpage_modalbox .details .title{
        font-size:20px
    }
    .mywebpage_modalbox .portfolio_main_title h3{
        font-size:20px
    }
    .mywebpage_modalbox .service_popup_informations .main_title h3{
        font-size:20px
    }
    .tokyo_tm_intro .demos img{
        max-width:100px
    }
}
@media(max-width:768px){
    .mywebpage_home .details .name{
        font-size:30px
    }
    .mywebpage_home .avatar{
        min-width:200px;
        min-height:200px
    }
    .tokyo_tm_portfolio .portfolio_list{
        margin:0
    }
    .tokyo_tm_portfolio .portfolio_list li{
        width:100%;
        padding-left:0
    }
    .mywebpage_news ul{
        margin:0
    }
    .mywebpage_news ul li{
        width:100%;
        padding-left:0
    }
    .mywebpage_news ul li .details{
        padding-left:30px;
        padding-right:30px
    }
    .mywebpage_modalbox .main_content .icon{
        position:relative;
        margin-bottom:25px
    }
    .mywebpage_modalbox .main_content .quotebox{
        padding-left:0
    }
    .mywebpage_modalbox .close a{
        width:30px;
        height:30px;
        font-size:14px
    }
    .mywebpage_modalbox .close{
        left:auto;
        right:0;
        top:-40px
    }
    .mywebpage_modalbox .box_inner{
        width:300px
    }
    .mywebpage_modalbox .description_wrap{
        padding:20px
    }
    .tokyo_tm_short_info{
        flex-direction:column
    }
    .tokyo_tm_short_info .left{
        width:100%;
        padding-right:0
    }
    .tokyo_tm_short_info .right{
        width:100%;
        padding-left:0
    }
    /*.tokyo_tm_progressbox .in{
        flex-direction:column
    }
    .tokyo_tm_progressbox .in .left{
        width:100%;
        padding-right:0;
        margin-bottom:60px
    }*/
    .tokyo_tm_skillbox .in{
        flex-direction:column
    }
    .tokyo_tm_skillbox .in .left{
        width:100%;
        padding-right:0;
        margin-bottom:60px
    }
    .tokyo_tm_skillbox .in .right{
        width:100%;
        padding-left:0
    }
    .mywebpage_resumebox .in{
        flex-direction:column
    }
    .mywebpage_resumebox .in .left{
        width:100%;
        padding-right:0;
        margin-bottom:60px
    }
    .mywebpage_resumebox .in .right{
        width:100%;
        padding-left:0
    }
    .mywebpage_services .list ul{
        margin:0
    }
    .mywebpage_services .list ul li{
        width:100%;
        padding-left:0
    }
    .mywebpage_skillsEd ul li{
        width:50%
    }
    .mywebpage_facts .list ul{
        margin:0
    }
    .mywebpage_facts .list ul li{
        width:100%;
        padding-left:0
    }
    .mywebpage_pricing .list>ul{
        margin:0
    }
    .mywebpage_pricing .list>ul>li{
        width:100%;
        padding-left:0
    }
    .mywebpage_modalbox .description_wrap:after{
        height:20px
    }
    .mywebpage_modalbox .description_wrap:before{
        height:20px
    }
    .mywebpage_modalbox .portfolio_main_title{
        margin-bottom:20px
    }
}