.h1, h1 {
    font-size: 2.5rem;
    font-family: avenir, sans-serif;
    text-transform: uppercase;
    
}

h1.pj-num {
    font-size: 1.15em;    
    text-shadow: 1px 1px 1px rgba(217, 198, 232, 0.42), 1px 0px 1px #f8f2f942;}



@media (min-width: 600px) {
    
    *{
        box-sizing: border-box;
    }
    
    .name type{
	    font-family: 'Source Sans Pro', sans-serif;
    }

    body {
        font-family: 'Cormorant Infant', serif;
        font-size:100%;
        margin:0;
        overflow: hidden;
    }


    /***************************Home********************************/
    
    .home{
        background: url('../imgs/index-bg.jpg');
        background-size: cover;
    }

    .home,
    .about{
        height: 100vh;
        display: flex;
    }

    .hm-left,
    .ab-left{
        height: 100%;
        flex: 1;
        min-width: 230px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .me{
        position: absolute;
        left: 100px;
        bottom: 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
    }
    .me>img{
        height: 100%;
    }
    .logo-box{
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
    }
    .logo-box>a{
        height: 100%;
        display: block;
    }
    .logo-box img{
        width: 50px;
    }
    .name-title-box>span{
        display: block;
    }
    .name{
	    font-family: sans-serif;
	    font-size: 2em;
	    padding: 0 0 30px 0;
	    font-weight: 300;
        font-size: 2em;
        padding: 0 0 30px 0;
        font-weight: lighter;
    }
    .title{
        font-weight: lighter;
        font-family: 'Source Sans Pro', sans-serif;
        word-spacing:6px;
        letter-spacing: 1px;
    }

    .hm-right,
    .ab-right{
        height: 100%;
        flex: 4;/*
        background-image: url('../imgs/home_bg.jpg');
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;*/
        position: relative;
            z-index: 1;
    }
    .arc{
        height: 100%;
        width: 20px;
        position: absolute;
        left: -19px;
        /*background-image: url('../imgs/arc.png');*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .intro-box{
        width: 100%;
        height: 100%;
        /*background: linear-gradient(to right, #cce2fb, rgba(204,226,251,0)); */
        display: flex;
        align-items: center;
        position: relative;
    }
    .scroll-left{
        height: 50px;
        width: 50px;
        background-image: url(../imgs/scroll-left.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        bottom: 10%;
        left: 35%;
        transform: translateX(-50%);
    }
    .intro-content{
    		position: absolute;
    		top: 55%;
    		left: 20%;
    		transform: translate(0%,-50%);
    }
    .intro-wrap{
        position: relative;
        font-size: 4vw;
        font-family: avenir, sans-serif;
        font-weight: 800;
    }
    .short-intro{
        font-family: avenir, sans-serif;
        font-size: 1.7em;
        font-weight: 300;
        width: 480px;
        line-height: 2em;
        color: white;
        margin: 0;
        background: -webkit-linear-gradient(-90deg, #fce0fd, #ffc4f8);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
    }
    .short-intro-strong{
        font-size: 1.6em;
        color: white;
        margin: 0;
        position: absolute;
        top: 0;
        font-family: avenir, sans-serif;
        background: -webkit-linear-gradient(-75deg, #dde2fb, #fdaae0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
    }
    .short-intro-shadow{
        text-shadow: 5px 4px 20px #956cb7;
        z-index: -1;
    }
    .short-intro-trans{
        margin: 0;
        font-size: 1.6em;
        color: transparent;
        margin-bottom: 20px;
    }
    .slash-decoration{
        color: #e6386f;
    }
    .my-email{
        text-decoration: none;
	    color: #0d1968;
	    font-family: avenir,sans-serif;
    }
    
    .intro-btns>button{
        border-radius: 30px;
        border: none;
        height: 40px;
        padding: 0 20px;
        /*box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.14);*/
        font-size: 0.8em;
        font-weight: bold;
        width: 180px;
        outline: none;
        color: white;
        background-color: transparent;
        border: solid 1px white;
    }
    .intro-btns{
        padding-top: 40px;
    }
    #vw-pj{
    }
    #abt-me{
        margin-left: 40px;
    }
     .intro-btns>button:hover{
        background: -webkit-linear-gradient(-45deg, white, #f4d1e6);
        box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.14);
        color: black;
        border: none;
    }
    /*******************************Projects***********************************/
    .projects{
        height: 100vh;
        position: absolute;
        top: 0;
        right: -100%;
        display: flex;
        transition: 1s ease;
        z-index: 2;
    }
    .projects.active{
        right:0;
    }
    .pj-left{
        height: 100%;
        width: 20vw;
        background-color: hsla(271, 57%, 87%, 0.76);
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }
    .nav-top{
        flex: 1;
        position: relative;
    }
    .close-btn{
        height: 40px;
        width: 40px;
        background-image: url('../imgs/x.png');
        background-size: contain;
        background-repeat: no-repeat;
        /*position: absolute;
        top: 70px;
        right: 0;*/
    }
    .nav-list{
        flex: 5;
        letter-spacing: 0.02em;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 1.2em;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        width: 100%;
        top: 70px;
    }
    .nav-list ul{
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: right;
        padding-top: 20px;
    }
    .nav-list ul li{
        padding: 20px 0;
        font-size: 0.9em;
        padding: 10px 0;
    }
    .nav-list ul li:hover{
        color: #e6386f;
        font-weight: bold;
    }
    .nav-list .active{
        color: #e6386f;
        font-weight: bold;
    }
    .pj-right{
        height: 100%;
        width: 80vw;
        background-color: white;
        overflow: hidden;
    }
    .pj-box{
        height: 100%;
    }
    .pj-content{
        height: 100%;
        width: 40vw;
        float: left;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0px 20px 0 #92899a;
    }
    .pj-content{
        background-color:#f4e6ff;
        /*transition: 0.5s ease;*/
    }
    .pj-content{
        /*box-shadow: 4px 0px 17px 9px #dbcbea;*/
    }
    .pj-content:hover{
        /*background-color: white;*/
        background: -webkit-linear-gradient(-45deg, #f6dffe, #d9f6f7);
        box-shadow: -4px -2px 20px 0 #92899a;
        transform: scale(1.0);
        z-index: 1;
    }
    .pj-content:hover .pjc-top{
        color: #e6386f; 
    }
    .pjc-top{
        flex: 1;
        color: rgba(255, 255, 255, 0);
        font-size: 7em;
    }
    .pjc-top h1{
        margin: 0;
        padding: 20px;
        font-family: 'Oswald', sans-serif;
        font-weight: lighter;
    }
    .pjc-bot{
        flex: 1;
        margin-left: 80px;
        margin-right: 30px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
    }
    .pj-title{
	    font-size: 0.8em;
	    font-weight: bold;
	    flex: 1;
	    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	    font-size: 1.1em;
	    letter-spacing: 0.1em;
	    font-weight: 550;
	    font-color: #00000;
	    color: #1e1e1e;
    }
    .pj-intro{
        font-size: 0.7em;
        line-height: 2em;
        flex: 2;
        font-family: sans-serif;
	    font-size: 0.8em;
	    font-weight: 300;
    }
    .pjc-bot img{
        width: 100%;
        /*position: absolute;*/
        left: 0;
        bottom: 30px;
        flex: 5;
        object-fit: contain;
    }
    /****************************Project*********************************/
    .project{
        background-color: white;
        height: 100vh;
        width: 100vw;
        display: flex;
        position: absolute;
        top: 0;
        right: -200%;
        padding: 20px 40px;
        transition: 1s ease;
        z-index: 4;
        justify-content: center;
    }
    .project>iframe{
        width: 80%;
        border: none;
    }
    .project.active{
        right: 0;
    }
    .pj-info-box{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pj-nav{
        width: 100%;
        padding-right: 20px;
    }
    .pj-nav ul{
        margin: 0;
        padding: 0;
        list-style: none;
        margin-top: 20px;
        font-family: 'Source Sans Pro', sans-serif;
        
        letter-spacing: 0.02em;
        font-size: 1em;
    }
    .main-cat{
        text-align: right;
        color: #697a91;
        display: block;
    }
    .sub-cat{
         text-align: right;
         color: #697a91;
         display: block;
         font-size: 0.7em;
         padding: 7px 0;
    }
    .pj-nav li{
        text-align: right;
        padding: 0px 10px;
        /*padding-bottom: 20px;*/
        margin-bottom: 10px;
        color: #697a91;
        display: block;
        border-right: solid 2px #cbdbed;
    }
    .pj-nav li.active{
        
        border-right: solid 2px #e3396f;
    }
    .pj-nav li.active .main-cat{
        font-weight: bold;
        color: #e3396f;
    }
    .pj-nav li:hover .main-cat{
        color: #e3396f;
    }
    .pj-nav li:hover{
        /*border-right: solid 2px #e3396f;*/
    }
    .pj-info{
        display: none;
        flex-direction: column;
        text-align: right;
    }
    .pj-info-title{
        font-size: 1.3em;
        color: #506277;
        font-family: 'Source Sans Pro', sans-serif;
        letter-spacing: 0.1em;
    }
    .pj-description{
        font-size: 0.9em;
        width: 200px;
        line-height: 2em;
    }
    .pj-date{
        font-size: 0.8em;
        color: #e6386f;
    }
    .hide-scroll{
        flex: 5;
        overflow: hidden;
        height: 100%;
    }
    .pj-imgs{
        width: calc(100% + 17px);
        height: 100%;
        overflow: auto;
    }
    .pj-imgs img{
        width: 100%;
        margin: 10px 0;
        padding: 0 5px;
    }
    .back-btn{
        background-image: url('../imgs/x.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        height: 5%;
		width: 10%;
		position: absolute;
		top: 5%;
		left: -1%;
        transform: translateY(-50%);
        transform: translateY(-50%) rotate(180deg);
    }
    .arc2{/*
        background-image: url('../imgs/arc2.png');*/
        top: 0;
        left: -20px;
    }
    /***************************about.html*****************************/
    .about{
        background-image: url(../imgs/web-about.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .ab-right{
        background-image: none;
    }
    .ab-right .intro-box{
        justify-content: center;
        /*background: rgba(204, 226, 251, 0.6);*/
    }
    .ab-right .intro-content{
        padding: 0;
    }
    .ab-right .short-intro{
        font-size: 0.8em;
    }
    .ab-right .arc{
        opacity: 0.6;
    }
    .about-intro-wrap{
        top: 47%;
    }
    .about-name{
        padding: 0;
    }
    .about-intro{
        margin: 40px 0;
    }
    .about-intro p{
        margin: 10px 0;
    }
    .my-works{
        display: flex;
    }
    .work{
        font-size: 0.8em;
        padding: 10px 40px 10px 0;
        background-image: url(../imgs/forward.png);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: right;
        margin-right: 30px;
    }
    .my-works a{
        text-decoration: none;
        color: black;
    }
    .dw-link{
        font-size: 0.7em;
        text-decoration: none;
        color: #e33a70;
    }
    .socials{
        margin-top: 30px;
    }
    .social-icon{
        height: 15px;
        width: 15px;
        display: inline-block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 20px;
    }

    .small{
        display: none;
    }
    .mid-pjs{
        display: none;
    }
    .mid-name{
        
    }
}

/*******************************************************/
@media screen and (max-width: 1200px) and (min-width:  600px) {
    .intro-content{
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .intro-box{
        /*background: linear-gradient(to right, #cce2fb, rgba(204, 226, 251, 0.35));*/
    }
    .intro-wrap{
        font-size: 4em;
    }
    .short-intro{
	    font-family: Futura, sans-serif;
		font-weight: lighter;
        /*width: 300px;*/
    }
    .pj-imgs img{
        width: 100%;
    }
    .intro-btns>button{
        font-size: 0.6em;
        width: 160px;
        height: 30px;
    }
    .scroll-left{
    }
    #abt-me{
        margin-left: 20px;
    }
    .back-btn{
        height: 40px;
    }
    .pj-left-blur{
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
    }
    .pj-box-a{
        width: 100%;
    }
    .pj-content{
        width: 100%;
        float: initial;
    }
    .mid-pjs{
        display: flex;
    }
    .lg-pjs{
        display: none;
    }
    .pj-right-a{
        overflow: auto;
        height: 100%;
        width: 80vw;
        background-color: white;
    }
    .pj-left{
        z-index: 2;
    }
    .hm-left{
        min-width: 0;
        z-index: 1;
        flex: 0;
    }
    .hm-right{
        flex: 8;
    }
    .hm-right .arc{
        display: none;
    }
    .intro-content{
        left: 52%;
    }
    .name-title-box{
        display: none;
    }
    .mid-name{
        display: initial;
    }
    .project{
        z-index: 3;
    }
    .ab-left{
        min-width: 0;
        flex: 0;
    }
    .about{
        background-position: center;
    }
    .logo-box{
        z-index: 4;
    }
    .my-works{
        display: initial;
    }
    .work{
        width: 52%;
    }
    .pjc-top{
        font-size: 4em;
    }
}


/*******************************************************/


@media only screen and (max-width: 600px) {
    .large{
        display: none;
    }
    .small{
        display: initial;
    }
    *{
        box-sizing: border-box;
    }

    body {
        font-family: 'Cormorant Infant', serif;
        font-size:100%;
        margin:0;
        overflow: hidden;
    }
    .main{
        position: relative;
        background-image: url('../imgs/index-bg.jpg');
        background-size: cover;
    }
    .main>img{
        position: absolute;
        top: -40px;
        left: -140px;
        height: calc(100vh + 40px);
    }
    /************************* Header ******************************/
    header{
        width: 100%;
        height: 15vh;
        position: relative;
        padding: 10px 0;
        /*min-height: 100px;*/
        transition: 0.8s ease;
    }
    header.active{
        background-color: #f6dffe;
    }
    header.project-head{
        background-color: white;
    }
    .logo{
        display: block;
        background-image: url('../imgs/logo.png');
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translate(-50%,0%);
        /*z-index: 1;*/
    }
    .menu{
        background-image: url(../imgs/menu.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        border: none;
        background-color: transparent;
        padding: 0;
        position: absolute;
        right: 10px;
        top: 20px;
        outline: none;
        /*z-index: 1;*/
    }
    /***************************Home******************************/
    .home,
    .about{
        height: 85vh;
        /*background-image: url('../imgs/home_bg-mobile.png');*/
        -webkit-background-size: cover;
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
        position: relative;
    }
    .hm-content,
    .abt-content{
        overflow: hidden;
        height: 100%;
        /*background: linear-gradient(to bottom, #cce2fb, rgba(204, 226, 251, 0.6));*/
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .hm-content-wrap,
    .abt-content-wrap{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: flex-end;
        height: fit-content;
        position: absolute;
        top: 4%;
    }
    .abt-content-wrap{
        align-items: initial;
    }
    .intro{
        line-height: 2em;
        color: #000000;
    }
    .hm-content-wrap button{
        border-radius: 30px;
        border: 1px solid white;
        height: 30px;
        font-size: 0.6em;
        font-weight: bold;
        width: 120px;
        outline: none;
        margin: 20px 20px;
        background: transparent;
        color: white;
    }
    .intro-wrap{
        position: relative;
        font-size: 1em;
        margin-right: 5px;
        font-family: avenir, sans-serif;
        font-weight: 800;
    }
    .short-intro{
        font-size: 3.6em;
        line-height: 2em;
        font-weight: lighter;
        color: white;
        margin: 0;
        background: -webkit-linear-gradient(-45deg, white, #f4d1e6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
    }
    .short-intro-strong{
        font-size: 3.6em;
        color: white;
        margin: 0;
        position: absolute;
        top: 0;
        background: -webkit-linear-gradient(-45deg, #ebcaff, #f4d1e6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
    }
    .short-intro-shadow{
        text-shadow: -7px -2px 20px #0000005e;
        z-index: -1;
    }
    .short-intro-trans{
        margin: 0;
        font-size: 3.6em;
        color: transparent;
        margin-bottom: 35px;
    }
    .email-wrap{
        margin-right: 20px;
    }
    .slash-decoration{
        color: #e6386f;
    }
    .my-email{
        text-decoration: none;
        color: black;
    }
    .intro-btns{
        padding-top: 40px;
    }
    .slash{
        color: #e6386f;
    }
    .hm-btns{
        position: relative;
        display: flex;
        flex-direction: column;
    }
    /*#vw-pj{
        background-color: white;
        color: black;
        top: 40px;
    }
    #abt-me{
        background-color: #e6386f;
        color: white;
        top: 110px;
    }*/
    .arc{
        position: absolute;
        height: 20px;
        width: 100%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        background-position: bottom;
        background-repeat: no-repeat;
        top: -19px;
    }
    /***************************Projects*****************************/
    
    .project>iframe{
        width: 100%;
        height: 100%;
        border: none;
        padding: 0 10px;
    }
    .prj-title{
        font-family: 'Source Sans Pro', sans-serif;
    }

    .pj-info-title{
        font-family: 'Source Sans Pro', sans-serif;
    }

    .projects{
        height: 85vh;
        /*//position: absolute;*/
        bottom: 0;
        width: 100%;
        overflow: auto;
        /*//transform: translateY(100%);*/
    }
    .projects.active{
        transform: translateY(0);
        background-color: #f6dffe;
    }
    .project-box{
        display: flex;
        padding: 20px 5px;
        margin: 10px 0;
    }
    .prj-num{
        flex: 1;
        font-size: 5em;
        color: #dae5f1;
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
    }
    .prj-content img{
        width: 100%;
    }
    .prj-content{
        flex: 3;
    }
    /*****************************Project***********************/
    .project{
        height: 85vh;
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: white;
        transform: translateY(150%);
        transition: 0.5s ease;
    }
    .project.active{
        transform: translateY(0);
    }
    .pj-wrap{
        position: relative;
        padding: 0 40px;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .pj-top{
        padding: 20px 0;
    }
    .pj-top h1{
        color: #506277;
        font-size: 1.5em;
        font-weight: bold;
    }
    .pj-text-area{
        padding-left: 10px;
    }
    .pj-top p{
        line-height: 2em;
        font-size: 0.8em;
    }
    .pj-date{
        color: #e6386f;
        font-size: 0.8em;
    }
    .hide-scroll{
        flex: 1;
        height: 100%;
        overflow:hidden;
        position: relative;
    }
    .pj-imgs{
        position: absolute;
        right: -17px;
        overflow: auto;
        height: 100%;
        width: calc(100% + 17px);
    }
    .project img{
        width: 100%;
        margin: 20px 0;
    }
    .back-btn{
        background-image: url(../imgs/back.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        position: absolute;
        top: -20px;
        left: 10%;
    }
    .arc2{
        /*background-image: url(../imgs/arc3.png);*/
    }
    /*************************About****************************/
    .about{
        /*background-image: url('../imgs/me1.png');*/
    }
    .about-main{
        background-image: url(../imgs/mobile-about.jpg);
        background-size: cover;
        background-position: center;
    }
    .about .arc{
        top: -20px;
        opacity: 0.3;
    }
    .abt-content{
        /*background: rgba(204, 226, 251, 0.3);*/
    }
    .abt-content-wrap{
        width: 63%;
        /*margin-left: 30px;*/
        left: 34%;
    }
    .about-intro p{
        margin: 10px 0;
        font-size: 0.9em;
    }
    .name{
        font-size: 1.3em;
        margin: 20px 0;
    }
    .about-name{
        margin: 10px 0;
    }
    .title{
        font-size: 0.7em;
    }
    .about-title{
        margin-bottom: 30px;
    }
    .short-intro{
        line-height: 1.8em;
        margin: 30px 15px 0 0;
        font-size: 1em;
        font-family: avenir, sans-serif;
        font-weight: 300;
    }
    .my-works{
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .work{
        font-size: 0.8em;
        padding: 10px 40px 10px 0;
        background-image: url(../imgs/forward.png);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: right;
        margin-right: 30px;
    }
    .work a{
        text-decoration: none;
        color: black;
        font-size: 1em;
    }
    .resume-btn{
        background: #e3396f;
        color: white;
        border: none;
        height: 30px;
        border-radius: 15px;
        width: 165px;
        font-size: 0.8em;
    }
    .socials{
        display: flex;
        margin-top: 30px;
    }
    .socials>a{
        display: inline-block;
        height: 20px;
        width: 20px;
        background-position: left center;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0px 7px;
    }
    /************************Menu*******************************/
    .menu-section{
        height: 100vh;
        width: 100%;
        background: #eaf1f9;
        position: absolute;
        top: 0;
        display: none;
    }
    .menu-section ul{
        font-family: 'Source Sans Pro', sans-serif;
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        width: 100%;
        height: 80%;
        bottom: 0;
        left: 0;
        padding: 0 10%;
    }
    .menu-section li{
        text-align: right;
        font-size: 2em;
        margin: 20px 0;
    }

    .menu-section li.active{
        color: #e6386f;
        font-weight: bold;
    }
    .close-btn{
        height: 50px;
        width: 50px;
        background-image: url(../imgs/x.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 10%;
        right: 10%;
    }
    /*************************************************************/
}