@charset "utf-8";
/* CSS Document */
 body{
    font-family:fontsDomine-Regular;
     cursor:url(../images/cursor_image.png), auto;
     transition:0.1s;
}
 body, html{
    height:100%;
}
 body{
    min-height:600px;
}
 @font-face {
    font-family:fontsBold;
    src:url(../fonts/GT-Walsheim-Bold.ttf);
}
 @font-face {
    font-family:fontsDomine-Bold;
    src:url(../fonts/Domine-Bold.ttf);
}
 @font-face {
    font-family:fontsDomine-Regular;
    src:url(../fonts/Domine-Regular.ttf);
}
 a:hover, button:hover{
    cursor:url(../images/cursor_image.png), auto;
}
 a:focus{
    text-decoration:none!important;
}
 .btn{
    border:none;
    border-radius:0;
}
 .full-height{
     width:100%;
     min-height:100%;
     background-size:cover;
}
 .bg-color{
    background-color:#f60;
}
 .color-red{
    color:#cd4d51;
}
 .bg-red{
    background-color:#cd4d51;
}
 ul{
    list-style-type:none;
     padding:0;
     margin:0;
}
 a:hover{
    text-decoration:none
}
 a:visited{
    text-decoration:none;
     color: #333333;
}
 .link-hover:hover{
    text-decoration:underline!important;
    color:#333333!important;
}
 .btn-bg{
    background:#d6e1e5;
     padding:8px 36px;
     font-size:30px;
     border-radius:32px;
}
 .home-body{
    padding:0px;
     margin:auto;
    border:12px solid #d6e1e5;
     background-attachment:fixed;
}
 .container-fluid{
    vertical-align:middle!important;
     padding:0;
     width:100%;
}
 .heading{
    font-size:80px;
     font-family:fontsBold;
     line-height:90px;
}
 .heading2{
    font-size:30px;
     color:#333333;
     font-family:fontsDomine-Regular;
     line-height:40px;
}
/*index page*/
 .home-heading{
    margin-top:0px;
    padding-top:0;
}
 .index-heaing2{
    margin-top:16px;
}
 .all-heading2{
    margin-top:30px;
     line-height:40px;
}
 .menu{
    margin-top:80px;
     margin-bottom:0px;
     padding-bottom:16px;
     position:relative;
}
 .nav-link{
    width:150px;
     height:60px;
     background:#d6e1e5;
     color: #333333;
    font-size:20px;
    border-radius:32px;
    padding-top:16px;
     margin-left:15px;
     margin-right:15px;
    font-family:fontsDomine-Regular;
}
 .nav-link:hover{
    background:#cd4d51;
     color:#fff;
}
 .instragram{
    background-color:#f00;
     border:1px solid #ff0;
     width:40px;
     height:40px;
}
 .social-link{
    margin-bottom:0px;
     position:absolute;
     right:57px;
     bottom:57px;
}
 .list-inline {
     padding-left: 0;
     margin-left: 0px;
}
 .show-line{
    padding-left:3.7%;
     padding-right:3.7%;
     padding-top:3.3%;
     padding-bottom:6px;
}
 .fa-facebook{
    padding:0px 4px;
     border-radius:50%;
}
 .btn-all{
    width:100px;
     height:60px;
     border-radius:32px;
     text-align:center;
}
 .btn-right{
     float:right;
     margin:0;
}
 .btn-menu{
     background-image:url(../images/toggle.png);
     background-repeat:no-repeat;
     background-position:center;
     background-color:#d6e1e5;
}
 .btn-menu:hover{
     background-image:url(../images/toggle_hover.png);
     background-repeat:no-repeat;
     background-position:center;
     background-color:#cd4d51;
}
 .btn-back{
    background-image:url(../images/arrow.png);
     background-repeat:no-repeat;
     background-position:center;
     background-color:#d6e1e5;
}

 .btn-back:hover{
    background:url(../images/return_button_hover.png) no-repeat center;
     background-size:cover;
}

#dollface {
background-image:url();
height:auto;
background-color:transparent;
background-color:#d6e1e5;
}

#dollface:hover {
  background-color:#cd4d51;
  border-radius:32px;
}

/*about*/
 .about-heading2{
    line-height:40px;
     margin-top:30px;
     width:60%;
}
 .about-bg{
    background:url(../images/about_all.jpg) no-repeat center;
     width:100%;
     max-width:100%;
     height:5000px;
     position:relative;
}
 .doll{
    width:16%;
     height:auto;
    position:absolute;
    left:50%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%) 
}
 .doll1{
    top:11.5%;
}
 .school-detail{
    top:12%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     color:#333333;
    text-align:left;
}
 .about-text{
    position:absolute;
    left:80%;
     width:25%;
     text-align:left;
}
 .school-name{
    font-family:fontsBold;
    font-size:40px;
    letter-spacing:-1px;
    line-height:50px;
}
 .school-text{
    font-size:15px;
     line-height:25px;
}
 .house1{
    position:absolute;
    left:50%;
    top:18%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:30%;
}
 .doll2{
    top:28%;
}
 .cloud1{
    position:absolute;
    left:26%;
     top:35%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:22%;
}
 .house2{
    position:absolute;
    left:50%;
    top:34%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:30%;
}
 .cloud2{
    position:absolute;
    left:70%;
     top:40%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:18%;
}
 .p_school{
    top:29%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
}
 .doll3{
    top:47%;
}
 .doll4{
    top:64%;
}
 .cloud3{
    position:absolute;
    left:22%;
     top:57%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:23%;
}
 .house3{
    position:absolute;
    left:50%;
    top:53.2%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:42%;
}
 .h_school{
    top:47%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
}
 .college{
    top:64%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
}
 .house4{
    position:absolute;
    left:50%;
    top:71%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:30%;
}
 .cloud4{
    position:absolute;
    left:67%;
     top:71%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
     width:20%;
}
 .doll5{
    position:absolute;
    left:50%;
    top:92.5%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%)
}
 .college-work{
    top:83%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
}
 .monitor{
    position:absolute;
     top:107%;
    left:50%;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
}
 .about-footer{
    width:50%;
     margin:64px auto;
}
 .about-footer-heading2{
    font-size:30px;
     color:#333333;
     letter-spacing:0;
     line-height:40px;
     font-family:fontsDomine-Regular;
     text-align:center;
     margin-top:30px;
     margin-bottom:100px;
}
 .face-img{
    margin:70px 0px 150px;
     width:280px;
     height:auto;
}
 .good-at{
    font-family:fontsBold;
    font-size:40px;
    color:#cd4d51;
    letter-spacing:-1px;
    line-height:50px;
     margin-bottom:100px;
}
 .about-menu{
    margin:0px 0px;
    width:100%;
     margin-left:auto;
     margin-right:auto;
}
 .about-menu li{
    margin:0px;
     margin-bottom:30px;
}
 .about-menu li {
    background:#d6e1e5;
     width:100%;
    border-radius:40px;
    font-size:30px;
    color:#333333;
    letter-spacing:0;
    line-height:40px;
     padding:24px 10px;
}
 .about-menu li:hover{
    background-color:#cd4d51;
     color:#ffffff;
}
 .my-path{
    font-family:fontsBold;
     font-size:40px;
     margin:170px 0px 84px;
     color:#cd4d51;
    letter-spacing:-1px;
    line-height:50px;
}
 .about-body{
    background:#fff;
     overflow:hidden!important;
}
 .line{
    width:10%;
     height:5500px;
     background:#b9d381;
     position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%)
}
 .about-row1{
    height:600px;
     position:relative;
}
 .desktop-about{
    display:block;
}
 .mobile-about-bg{
    display:none;
}
/*menu*/
 .btn-close{
    background-image:url(../images/cross_icon.png);
     background-repeat:no-repeat;
     background-position:center;
     background-color:#d6e1e5;
}
 .btn-close:hover{
    background-image:url(../images/cross_icon_hover.png);
    background-color:#cd4d51;
}
/*work*/
 .w3-modal{
    padding-top:0;
     background-color:#fff;
     border:12px solid #d6e1e5;
}
 .w3-modal-content{
    margin:auto;
    position:relative;
    padding:0;
    outline:0;
    width:100%;
     height:auto;
     padding-top:64px;
    padding-right:32px;
     max-width:1200px;
}
 .btn-back{
    padding-top:8px;
     padding-bottom:8px;
}
 .modal-img{
    margin-top:0px;
}
 .w3-modal-content .menu{
    margin-top:40px;
     margin-bottom:40px;
}
 .modal-random{
    font-size:20px;
    font-family:fontsBold;
     margin-top:24px;
     line-height:30px;
}
 .work-row{
    padding:64px 0px 128px;
     width:75%;
     margin-left:auto;
     margin-right:auto;
     text-align:center;
}
 .thumbnail{
     border:none;
}
 .thumbnail img{
    border-radius:5px;
}
 .thumbnail-heading{
    font-size:20px;
     color: #333333;
    font-family:fontsDomine-Regular;
     margin-top:20px;
     line-height:30px;
}
 .work-row .col-sm-4{
    padding-left:8px;
     padding-right:8px;
}
 .open-menu-btn{
    background:url(../images/menu_open.png);
     width:100px;
     height:100px;
     background-size:cover;
}
/*project box*/
 .project-heading2{
    line-height:40px;
     margin-top:30px;
     padding-left:8px;
     padding-right:8px;
     display:block;
     margin-left:auto;
     margin-right:auto;
}
 .project-img{
    margin-top:64px;
     margin-bottom:64px;
}
 .project-img img{
    width:60%;
     max-width:100%;
     height:auto;
     border-radius:8px;
}
 .project-text{
    font-family:fontsDomine-Regular;
     font-size:20px;
     color: #333333;
     margin:64px auto 150px;
     width:40%;
     line-height:30px;
}
 .project-text2{
    width:57%;
}
 .youtube-text{
    width:80%;
}
/*39 page*/
/*.project-body{
    min-height:441px;
}
*/
 .title39{
    width:70%;
}
 .title-shiseido{
    width:60%;
}
 .title-hypa{
    width:55%;
}
 .title-citi{
    width:60%;
}
 .title-create{
    background:#f00;
     width:60%;
}
/*menu-page*/
 .manu-page{
    min-height:550px;
}
 .menu-page .menu{
    margin-bottom:0;
     margin-top:48px;
}
/*blog*/
 .banner-blog{
    width:80%;
}
 .blog-heading2{
    width:60%;
     line-height:40px;
     margin-top:30px;
     margin-left:auto;
     margin-right:auto;
}
 .blog-menu{
    margin-top:90px;
     margin-bottom:100px;
     width:100%;
     display:block;
     margin-left:auto;
     margin-right:auto;
     max-width:1000px;
}
 .blog-menu li a{
    background:#fff;
     font-size:20px;
     padding:16px 20px;
    border-radius:32px;
     margin:10px;
     border:2px solid #d6e1e5;
     letter-spacing:0;
     color:#333333;
}
 .nav-justified li:nth-child(1), .nav-justified li:nth-child(2), .nav-justified li:nth-child(4), .nav-justified li:nth-child(5){
    width:2%;
     max-width:100px;
}
 .blog-menu li.active a{
    background-color:#cd4d51;
     color:#ffffff;
     border:2px solid #fff;
}
 .blog-menu li a:hover, .blog-menu li a.active{
    background-color:#cd4d51;
     color:#ffffff;
     border:2px solid #fff;
}
 .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
     color: #fff;
     background-color: #cd4d51;
}
 .blog-hover{
    color:#333333;
     width:70%
}
 .blog-hover:hover .media1-row, .blog-hover:hover .media2-row, .blog-hover:hover .media3-row{
    color: #333333!important;
     background:#d6e1e5!important;
}
 .blog-body-main{
    padding-bottom:120px;
}
 .blog-body-main .media-left{
    width:30%;
}
 .blog-body-main .media-left img{
    width:70%;
}
 .inner-width{
     width:65%;
     margin-left:auto;
     margin-right:auto;
     max-width:1000px;
}
 .media-row{
    text-align:left;
     padding:40px 16px 40px 0px;
     margin-top:16px;
}
 .line1, .line2, .line3, .line4, line5{
    height:2px;
     background:#d6e1e5;
     margin:auto;
}
 .media{
    text-align:left;
     padding:32px 16px 32px 0px;
     margin-top:0;
}
 .media-object{
     margin-right:32px;
     width:100px;
}
 .blog-media-heading{
    font-size:30px;
    font-family:fontsDomine-Bold;
     line-height:40px;
}
 .media-text{
    font-size:20px;
     line-height:30px;
     font-family:fontsDomine-Regular;
     margin-top:24px;
}
/*blog post*/
 .blog_post-heading{
    width:70%;
}
 .post-youtube{
    margin:64px 0px 100px;
}
 .post-text{
    font-family:fontsDomine-Regular;
     font-size:20px;
     text-align:left;
     margin:32px auto 84px;
     width:70%;
     color:#333333;
     font-weight:500;
     line-height:30px;
}
 .post-heading{
    font-family:fontsDomine-Bold;
     font-size:30px;
     margin:32px auto 84px;
     text-align:left;
     width:90%;
     line-height:40px;
}
 .post-img{
    width:100%;
     margin-bottom:12px;
     margin-top:16px;
}
 .img-title{
    font-family:fontsDomine-Bold;
     font-size:20px;
     color:#333333;
     margin-bottom:64px;
     line-height:30px;
}
 .post-img2{
    margin-bottom:32px;
     width:auto;
     height:auto;
}
 .name{
    font-family:fontsBold;
     font-size:30px;
     color:#333;
     line-height:40px;
}
 .time{
    font-family:fontsDomine-Regular;
     font-size:20px;
     line-height:30px;
     color: #333333;
     margin-bottom:84px;
}
 .shair-box{
     padding:32px 0px 48px 0px;
     border-top:2px solid #d6e1e5;
    border-bottom:2px solid #d6e1e5;
}
 .share-heading{
    font-family:fontsDomine-Regular;
     font-size:30px;
     margin-bottom:32px;
     line-height:40px;
}
 .post-social{
    margin:0px;
}
 .comment-box{
    padding:84px 0px 0px 0px;
}
 .comment-heading{
    font-family:fontsBold;
     font-size:36px;
     line-height:48px;
     color:#cd4d51;
     margin-bottom:64px;
}
 .comment-box .media{
    margin:0;
}
 .comment-box .media-left{
    width:30%;
}
 .media-left-name{
    font-family:fontsDomine-Bold;
     font-size:20px;
     margin-top:26px;
     line-height:30px;
}
 .media-left-time{
    font-family:fontsDomine-Regular;
     font-size:20px;
     line-height:30px;
}
 .form-box{
    padding-bottom:84px;
     padding-top:84px;
}
 .post-form{
    padding:48px 0px;
}
 .form-box .col-sm-5{
    width:39%;
}
 .form-box .col-sm-2{
    width:20%;
     padding-left:12px;
     padding-right:0;
}
 .form-control{
    margin-bottom:16px;
    padding:24px 6px;
     font-size:18px;
    font-family:fontsDomine-Regular;
     border:2px solid #d6e1e5;
     margin-top:12px;
     box-shadow:none!important;
}
 .form-control:focus {
     border-color: #d6e1e5;
    box-shadow:none!important;
}
 textarea{
    padding:6px;
    font-size:18px;
    font-family:fontsDomine-Regular;
     border:2px solid #d6e1e5;
     width:100%;
     border-radius:4px;
     padding-top:-30px!important;
     color:#aaa!important;
     box-shadow:none!important;
     max-width:100%;
     min-width:100%;
     min-height:100px;
     max-height:100px;
}
 .form-color{
    color:#f00!important;
}
 .pl-0{
    padding-left:0;
}
 .pr-0{
    padding-right:0;
}
 .btn-send{
    width:100%;
     color: #ffffff;
     padding:12px 12px;
     font-size:18px;
    font-family:fontsDomine-Regular!important;
     text-transform:capitalize;
     border-radius:4px;
     margin-top:12px;
}
 .btn-send:active, .btn-send:focus{
    color:#fff;
     border:none!important;
}
/*contact*/
 .contact-inner-width{
    width:60%;
     margin-top:84px;
     margin-bottom:84px;
}
 .earth-img{
    width:100%;
     margin:32px 0px;
}
 .send-img{
    width:100%;
     vertical-align:middle;
     margin:0;
     margin-top:160px;
}
 .contact-text{
    font-size:20px;
    font-family:fontsDomine-Regular;
     color: #333333;
     line-height:30px;
}
 .earth1{
    width:70%;
     margin-left:auto;
     margin-right:32px;
}
 .earth2{
     width:70%;
     margin-right:auto;
     margin-left:32px;
}
 .contact-add{
    font-size:30px;
    font-family:fontsDomine-Regular;
     color: #333333;
     line-height:40px;
}
 .owly_mail:hover, .owly_mail:focus{
    color: #333333;
}
 .owly_mail:hover, .owly_mail:focus{
    text-decoration:underline;
}
 .contact-social{
    margin:84px auto;
}
 @media screen and (max-width:1270px){
     .inner-width{
         width:70%;
    }
     .post-icon{
        width:35%;
    }
     .title-citi{
        width:73%;
    }
}
 @media screen and (max-width:1200px){
     .inner-width{
         width:76%;
    }
     .title-shiseido{
        width:70%;
    }
     .nav-justified li:nth-child(1), .nav-justified li:nth-child(2), .nav-justified li:nth-child(4), .nav-justified li:nth-child(5){
        width:0%;
    }
     .blog-heading2{
        width:80%;
    }
}
 @media screen and (max-width:1150px){
     .blog-menu li a{
        font-size:20px;
         line-height:30px;
         padding:16px 20px;
        margin:6px;
    }
}
 @media screen and (max-width:1100px){
     .inner-width{
         width:80%;
    }
     .post-icon{
        width:42%;
    }
     .nav-justified li:nth-child(1), .nav-justified li:nth-child(2), .nav-justified li:nth-child(4), .nav-justified li:nth-child(5){
        width:2%;
    }
     .blog-menu li a{
        font-size:20px;
         padding:16px 0px;
    }
    /*about*/
     .about-text{
        width:35%;
    }
     .school-detail{
        top:10%;
    }
     .p_school{
        top:27.5%;
    }
     .h_school{
        top:45%;
    }
     .college{
        top:62%;
    }
     .college-work{
        top:81%;
    }
}
 @media screen and (max-width:1050px){
     .inner-width{
         width:80%;
    }
     .project-box .w3-display-bottommiddle{
        top:180%;
    }
     .send-img{
        margin-top:110px;
    }
     .blog-heading2{
        width:100%;
    }
    /*about*/
     .about-menu li{
        font-size:20px;
        line-height:30px;
         padding:16px 6px;
    }
}
 @media screen and (max-width:970px){
     .project-text {
        width:80%;
    }
     .project-img img{
        width:80%;
    }
     .title-hypa{
        width:70%;
    }
     .title-citi{
        width:80%;
    }
}
 @media screen and (max-width:970px) and (min-width:769px){
     .banner-blog{
        width:95%;
    }
     .blog-menu li a{
        margin-left:3px;
         margin-right:3px;
    }
}
 @media screen and (max-width:920px){
     .post-icon{
        width:80%;
    }
     .work-row .col-sm-4{
        width:50%;
    }
     .blog_post-heading{
        width:85%;
    }
}
 @media screen and (max-width:870px){
     .project-text{
        width:70%;
    }
     .earth1{
         width:90%;
         margin-left:auto;
         margin-right:32px;
    }
     .earth2{
         width:90%;
         margin-right:auto;
         margin-left:32px;
    }
    /*about*/
     .about-heading2{
        width:80%;
    }
     .school-name{
        font-size:20px;
        line-height:30px;
    }
     .school-text{
        font-size:15px;
         line-height:25px;
    }
}
 @media screen and (max-width:820px){
     .nav-link{
        width:150px;
         height:60px;
        margin-left:11px;
         margin-right:11px;
        font-family:fontsDomine-Regular;
    }
     .project-text{
        margin-bottom:100px;
    }
}
 @media screen and (max-width:790px) and (min-width:768px){
     .w3-modal-content .menu li a{
        margin-left:1px;
         margin-right:1px;
    }
}
 @media screen and (max-width:769px){
     .menu{
        margin-top:40px;
         margin-bottom:40px;
    }
     .nav-link{
        width:98px;
         height:39px;
        padding-top:10px;
         font-size:15px;
    }
     .heading{
        font-size:40px;
         line-height:50px;
    }
     .heading-work{
        margin-top:0;
    }
     .all-heading2{
        line-height:25px;
         margin-top:0;
    }
     .heading2{
        font-size:20px;
         line-height:30px;
    }
     .social-link{
        position:absolute;
        left:50%;
        bottom:25%;
        transform:translate(-50%,0%);
        -ms-transform:translate(-50%,0%);
         width:100%;
    }
     .show-line{
        padding-left:28px;
         padding-right:28px;
         padding-top:28px;
         padding-bottom:0px;
    }
     .btn-all{
        width:60px;
         height:36px;
    }
     .btn-menu{
         background-image:url(../images/toggle_small.png);
    }
     .btn-menu:hover{
         background-image:url(../images/toggle_small_hover.png);
    }
     .btn-back{
        background-image:url(../images/arrow_small.png);
    }
     .btn-close{
        background-image:url(../images/cross_icon_small.png);
    }
     .btn-close:hover{
        background-image:url(../images/cross_icon_small_hover.png);
    }
     .work-row{
        padding-top:40px;
    }
     .work-row .col-xs-12{
        width:50%;
    }
     .thumbnail-heading{
        font-size:15px;
         line-height:25px;
    }
    /*project*/
     .project-heading2{
        line-height:30px;
         margin-top:10px;
    }
    /*.project-img iframe{
        width:80%!important;
         height:350px!important;
    }
    */
     .project-text{
        font-size:15px;
         margin-bottom:54px;
         line-height:25px;
    }
    /*manu-*/
     .modal-img{
        margin-top:-32px;
    }
     .manu-social.social-link{
        bottom:6%;
    }
    /*blog*/
     .blog-heading2{
        line-height:30px;
         width:80%;
         margin-top:12px;
    }
     .blog-menu{
        margin-top:40px;
         margin-bottom:40px;
    }
     .blog-menu li a{
        margin-left:5px;
         margin-right:5px;
         padding:10px 6px;
         font-size:12px;
    }
     .nav-justified li:nth-child(1), .nav-justified li:nth-child(2), .nav-justified li:nth-child(3), .nav-justified li:nth-child(4), .nav-justified li:nth-child(5){
        width:20%;
         max-width:100%;
         float:left;
         margin:0;
    }
     .media{
        padding: 12px 16px 12px 0px;
         margin:0;
    }
     .blog-body-main .media-left img{
        width:60%;
         margin-top:10px;
    }
     .blog-media-heading{
        font-size:20px;
         line-height:30px;
    }
     .media-text{
        font-size:15px;
         line-height:25px;
         margin-top:14px;
    }
    /* .blog-menu li a{
        font-size:20px;
         padding:16px 24px;
    }
    */
     .post-form .pl-0{
        padding-left:12px;
    }
    /*blog*/
     .work-row .col-sm-4{
        width:100%;
    }
    /*blog_post*/
     .blog-body .col-sm-4{
        padding:0;
    }
    /* iframe{
        width:100%;
    }
    */
     .post-youtube{
        margin:40px 0px 60px;
    }
     .post-text{
        margin:32px auto 40px;
         font-size:15px;
         width:100%;
         line-height:25px;
    }
     .post-heading{
        width:100%;
         font-size:20px;
         margin:50px auto 50px;
         line-height:30px;
    }
     .post-img{
        margin:0;
    }
     .img-title{
        margin-bottom:0;
    }
     .post-img2{
        margin-bottom:16px;
    }
     .name{
        font-size:20px;
         line-height:30px;
    }
     .time{
        font-size:15px;
         margin-bottom:40px;
         line-height:25px;
    }
     .shair-box{
        padding:32px 0px 40px;
    }
     .media-left-name{
        font-size:15px;
         font-weight:bold;
         line-height:25px;
    }
     .media-left-time{
        font-size:15px;
         line-height:25px;
    }
     .form-box .col-sm-5{
        width:100%;
    }
     .form-box .col-sm-2{
        width:100%;
         padding:0;
         padding-left:12px;
         padding-right:15px;
    }
     .form-control{
        margin-bottom:16px;
        padding:10px 12px;
         font-size:15px;
         margin-top:12px;
    }
     textarea{
        padding:10px;
        font-size:15px;
         padding-top:-30px!important;
         height:80px;
    }
     .btn-send{
        font-size:15px;
         padding:6px;
         margin:0;
         line-height:25px;
    }
     .comment-box{
        padding-top:40px;
    }
     .comment-heading{
        font-size:20px;
         margin-bottom:40px;
         line-height:30px;
    }
     .comment-box .media-text{
        font-size:15px;
         line-height:25px;
    }
     .form-box {
        padding-bottom: 40px;
        padding-top: 40px;
    }
     .share-heading{
        font-size:20px;
         line-height:30px;
    }
     .post-form{
        padding-top:12px;
    }
     .project-box {
         padding: 20px 20px;
    }
    /*about*/
     .face-img {
        margin: 40px 0px 52px;
         width:218px;
    }
     .good-at {
         font-size: 20px;
         line-height:30px;
         margin-bottom:40px;
    }
     .about-banner .col-xs-4{
        padding-left:10px;
         padding-right:10px;
    }
     .about-menu li{
        font-size:15px;
        line-height:25px;
         padding:12px 2px;
    }
     .my-path{
        font-size:20px;
         margin:50px 0px 44px;
        line-height:30px;
    }
     .school-detail{
        top:9.5%;
    }
     .p_school{
        top:26.6%;
    }
     .h_school{
        top:44.4%;
    }
     .college{
        top:60.8%;
    }
     .college-work{
        top:80.4%;
    }
     .school-name{
        font-size:15px;
        line-height:25px;
    }
     .school-text{
        font-size:12px;
         line-height:22px;
    }
     .about-footer{
        margin-top:50px;
         margin-bottom:70px;
    }
     .about-footer .heading{
        font-size:20px;
         line-height:30px;
    }
     .about-footer-heading2{
        margin-top:20px;
         margin-bottom:50px;
    }
    /*contact*/
     .send-img{
        width:130%;
         margin-top:140px;
         margin-bottom:4px;
    }
     .earth1{
        width:100%;
         margin-left:auto;
    }
     .earth2{
         width:100%;
         margin-right:auto;
    }
}
 @media screen and (width:812px){
    .social-link{
        position:absolute;
        bottom:25px;
         right:25px;
    }
}
 @media screen and (width:768px){
    .social-link{
        position:absolute;
        bottom:25%;
    }
}
 @media screen and (width:736px){
    body{
         min-height:400px;
    }
     .social-link{
        position:absolute;
        bottom:28px;
    }
}
 @media screen and (width:734px){
    body{
         min-height:auto;
    }
    .container-fluid.w3-display-middle{
        position:absolute;
         top:45%;
    }
     .social-link{
        position:absolute;
        bottom:28px;
    }
}
 @media screen and (width:732px){
    body{
         min-height:400px;
    }
    .container-fluid.w3-display-middle{
        position:absolute;
         top:45%;
    }
     .social-link{
        position:absolute;
        bottom:38px;
    }
}
 @media screen and (width:684px){
    body{
         min-height:400px;
    }
     .social-link{
        position:absolute;
        bottom:28px;
    }
}
 @media screen and (width:667px){
    body{
         min-height:400px;
    }
     .social-link{
        position:absolute;
        bottom:28px;
    }
}
 @media screen and (width:640px){
    body{
         min-height:500px;
    }
     .social-link{
        position:absolute;
        bottom:48px;
    }
}
 @media screen and (max-width:660px){
     .blog-menu li a {
         margin-left: 2px;
        margin-right: 2px;
        padding: 10px 3px;
        /*about*/
         .about-text{
            left:78.2%;
        }
    }
}
 @media screen and (max-width:650px){
     .container-fluid.w3-display-middle{
        position:absolute;
         top:50%;
    }
     .menu{
        margin-top:70px;
    }
    /*contact page*/
     .contact-inner-width .col-xs-5, .contact-inner-width .col-xs-2{
        width:100%;
    }
     .earth1, .earth2{
        margin:0;
    }
     .earth-img{
        width:70%;
    }
     .send-img{
        margin:32px 0px;
         width:50%;
    }
}
 @media screen and (max-width:639px){
     .about-banner .col-xs-4{
        padding-left:6px;
         padding-right:6px;
    }
     .about-menu li{
        margin-bottom:12px;
    }
     .about-menu li{
        font-size:15px!important;
        line-height:25px;
         border-radius:32px;
         padding:10px 2px;
    }
     .desktop-about{
        display:none;
    }
     .mobile-about-bg{
        display:block;
    }
     .doll{
        width:50%;
    }
     .doll1{
        top:8%;
    }
     .doll2{
        top:27%;
    }
     .doll3{
        top:46.5%;
    }
     .doll4{
        top:64.1%;
    }
     .doll5{
        top:85%;
    }
     .about-text{
        position:absolute;
        left:50%;
         width:80%;
         text-align:center;
    }
     .school-name{
        font-size:20px;
         line-height:30px;
    }
     .school-text{
        font-size:15px;
         line-height:25px;
    }
     .school-detail{
        top:14.5%;
    }
     .p_school{
        top:34%;
    }
     .h_school{
        top:53%;
    }
     .college{
        top:72%;
    }
     .college-work{
        top:93%;
    }
     .about-body{
         overflow:visible!important;
    }
     .monitor{
        top:99.6%;
         width:70%;
    }
     .monitor-doll{
        width:30%;
         position:absolute;
         top:101.9%;
         left:50%;
        transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%)
    }
     .about-footer{
         width:70%;
         margin-top:80%;
    }
}
 @media screen and (max-width:600px){
     .menu li{
        width:45%;
         margin-bottom:32px;
    }
     .social-link{
        position:absolute;
        left:50%;
        top:85%;
        transform:translate(-50%,0%);
        -ms-transform:translate(-50%,0%);
         width:100%;
    }
     .heading-work{
        margin-top:32px;
    }
     .work-row .col-xs-12{
        width:100%;
    }
     .banner, .banner-blog{
        margin-top:50px;
    }
     .project-box .img-responsive{
        height:300px;
    }
    /*blog*/
     .nav-justified li:nth-child(1), .nav-justified li:nth-child(2), .nav-justified li:nth-child(3), .nav-justified li:nth-child(4), .nav-justified li:nth-child(5){
        width:33%;
         max-width:100%;
         float:left;
         margin:0;
    }
     .mobile-hideen{
        display:none;
    }
     .post-photo{
        padding-top:20px;
    }
     .post-photo .col-xs-4{
        width:100%;
         padding:0;
    }
     .img-title{
        font-size:15px;
         margin:32px 0px;
         line-height:25px;
    }
     .post-img2{
        margin-top:32px;
    }
     .comment-box .media-left, comment-box .media-right, comment-box .media-body {
        display:block;
    }
     .comment-box .media-left {
        width: 100%;
    }
    /*about*/
     .about-heading2{
        width:80%;
    }
    /*contact*/
     .contact-add{
        font-size:20px;
         line-height:30px;
    }
}
 @media screen and (max-width:600px) and (min-width:500px){
     .menu li:nth-child(1) .nav-link, .menu li:nth-child(3) .nav-link{
        margin-left:44%;
    }
     .menu li:nth-child(2) .nav-link, .menu li:nth-child(4) .nav-link{
        margin-right:44%;
    }
}
 @media screen and (max-width:499px) and (min-width:420px){
     .menu li:nth-child(1) .nav-link, .menu li:nth-child(3) .nav-link{
        margin-left:40%;
    }
     .menu li:nth-child(2) .nav-link, .menu li:nth-child(4) .nav-link{
        margin-right:40%;
    }
}
 @media screen and (max-width:550px){
     .menu{
        padding-bottom:0px;
    }
    /*about*/
     .about-text{
        position:absolute;
        left:50%;
         width:90%;
    }
}
 @media screen and (max-width:505px){
    /*index*/
     .post-icon li{
         width:40px;
         height:40px;
         margin-left:2px;
         margin-right:2px;
    }
     .blog-heading2{
        width:100%;
    }
     .heading2{
        margin-left:0px;
         margin-right:0px;
    }
     .project-heading2{
        margin-left:auto;
         margin-right:auto;
    }
     .btn-close{
        margin-bottom:32px;
    }
     .modal-img{
        margin-top:0px;
    }
     .contact-inner-width{
        width:80%;
    }
     .post-youtube{
        margin:30px;
    }
     .post-text {
        line-height:25px;
    }
    /*.post-text {
        margin: 12px auto 20px;
    }
    */
     .post-heading {
        margin:0;
         line-height:30px;
    }
    /*about*/
     .about-heading2{
        width:100%;
    }
     .school-detail{
        top:14%;
    }
}
 @media screen and (max-width:460px){
     .about-banner .row{
         margin-left:-28px;
         margin-right:-28px;
    }
     .about-banner .col-xs-4{
        padding-left:2px;
         padding-right:2px;
    }
     .about-menu li{
        margin-bottom:8px;
    }
     .about-menu li{
         padding:8px 0px;
    }
     .about-text{
        position:absolute;
        left:50%;
         width:95%;
    }
     .school-detail{
        top:13.5%;
    }
     .school-name{
        font-size:15px;
         line-height:25px;
    }
     .school-text{
        font-size:12px;
         line-height:22px;
    }
}
 @media screen and (max-width:420px){
    /*index*/
     .menu li {
        margin-bottom: 46px;
    }
     .nav-link{
        width:120px;
         height:48px;
         color: #333333;
        font-size:16px;
         padding-top:14px;
    }
    /*.social-link{
        width:100%;
    }
    */
     .modal-img{
         width:40%;
    }
     .menu-page .menu{
        margin-top:36px;
    }
     .heading {
        font-size: 38px;
         line-height:48px;
    }
     .title-hypa{
        width:90%;
    }
     .title-citi{
        width:90%;
    }
     .project-text{
        width:90%;
    }
    /*manu*/
     .manu-social.social-link{
        top:90%;
    }
    /*blog*/
     .blog_post-heading{
        width:90%;
    }
     .blog-menu li a{
        margin-left:5px;
         margin-right:6px;
         padding-left:3px;
         padding-right:3px;
    }
     .post-img2{
        margin-bottom:32px;
         width:auto;
         height:auto;
    }
     .project-box .img-responsive{
        height:350px;
    }
     .post-social li{
        margin-bottom:20px;
         width:32%;
    }
     .post-social li:nth-child(1), .post-social li:nth-child(4){
        text-align:right;
    }
     .post-social li:nth-child(3), .post-social li:nth-child(6){
        text-align:left;
    }
     .post-social li:nth-child(2), .post-social li:nth-child(5){
        width:20%;
    }
     .contact-add{
        font-sixe:20px!important;
    }
    /*about*/
     .about-menu li{
        margin-bottom:8px;
    }
     .p_school{
        top:33%;
    }
     .h_school{
        top:52.3%;
    }
     .college{
        top:71%;
    }
     .college-work{
        top:92%;
    }
     .about-footer{
        width:90%;
         margin-bottom:50px;
    }
}
 @media screen and (max-width:380px){
     .menu li {
        margin-bottom: 36px;
    }
    /*.social-link{
        position:absolute;
         right:25%;
    }
    */
     .banner-blog{
        width:95%;
    }
     .blog-heading2{
        padding-left:10px;
         padding-right:10px;
    }
     .blog-menu li a{
        padding-left:0;
         padding-right:0;
         padding-top:11px;
         margin-left:2px;
         margin-right:2px;
    }
    /*about*/
     .about-banner .col-xs-4{
        padding-left:3px;
         padding-right:3px;
    }
     .about-menu li{
         padding:6px 0px;
         font-size:12px!important;
         line-height:22px;
    }
}
 @media screen and (width:375px){
    .social-link{
        position:absolute;
        bottom:14%;
    }
}
 @media screen and (max-width:365px){
     .face-img{
        width:180px;
         height:auto;
    }
     .school-detail{
        top:12.8%
    }
     .p_school{
        top:32.3%;
    }
     .h_school{
        top:51.7%;
    }
     .college{
        top:69.5%;
    }
     .college-work{
        top:91%;
    }
}
 @media screen and (max-width:350px){
    /*index*/
     .menu li {
        margin-bottom: 30px;
    }
     .project-box .w3-display-bottommiddle{
        top:150%;
    }
     .blog_post-heading{
        width:100%;
    }
}
 @media screen and (max-width:330px){
    /*index*/
     .nav-link{
         width:110px;
    }
}
 @media screen and (min-width:1400px){
     .container-fluid{
        max-width:1366px;
    }
     .about-footer{
        max-width:700px;
    }
}
 @media screen and (min-width:1900px){
    .about-text{
        width:20%;
    }
     .list-inline li img{
        width:50px;
         height:auto;
    }
     @media screen and (min-width:2500px){
        .about-text{
            width:15%;
        }
         @media screen and (min-width:4500px){
            .about-text{
                width:10%;
            }