/* =========================================================
   Atelier Parallel Website V2.0
   Shared CSS
========================================================= */

@font-face{
    font-family:"DM Sans";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/wp-content/themes/blockbase/assets/fonts/dm-sans/dm-sans-Regular.woff2") format("woff2");
}

/* =========================================================
   Reset
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    background:#fff;
    color:#333;
    font-family:"DM Sans",sans-serif;
    font-size:12px;
    line-height:1.7;
}

body{
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:#333;
    text-decoration:underline;
    text-underline-offset:3px;
}

a:hover{
    text-decoration:none;
}

/* =========================================================
   Layout
========================================================= */

.ap-page{
    position:relative;
    width:100%;
    min-height:100vh;
}

/* =========================================================
   Header
========================================================= */

.ap-header{
    position:fixed;
    top:36px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
}

.ap-wordmark{
    width:398px;
    max-width:72vw;
    height:auto;
}

/* =========================================================
   Footer
========================================================= */

.ap-footer-logo-link{
    position:fixed;
    left:50%;
    bottom:72px;
    transform:translateX(-50%);
    z-index:1000;
}

.ap-footer-logo{
    width:105px;
    height:auto;
}

.ap-copyright{
    position:fixed;
    left:30px;
    bottom:36px;
    font-size:9px;
    white-space:nowrap;
    z-index:1000;
}

/* =========================================================
   Home
========================================================= */

.ap-home{
    width:100%;
    height:100vh;
    overflow:hidden;
}

.ap-home main{
    width:100%;
    height:100%;
}

.ap-home-nav{

    position:fixed;

    top:67%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    font-size:12px;

    line-height:1.7;

    z-index:900;

}

.ap-home-nav a{
    display:block;
    margin-bottom:12px;
}

/* =========================================================
   Common Page
========================================================= */

.ap-main{

    width:664px;

    max-width:calc(100vw - 48px);

    margin:0 auto;

    padding-top:280px;

    padding-bottom:240px;

}

.ap-text{

    font-size:15px;

    line-height:1.8;

}

.ap-text p{

    margin-bottom:48px;

}

.ap-contact{

    width:664px;

    max-width:100%;

    margin:auto;

    font-size:15px;

    line-height:1.8;

}

.ap-portfolio{

    width:664px;

    max-width:100%;

    margin:auto;

}

/* =========================================================
   Utility
========================================================= */

.ap-spacer-20{
    height:20px;
}

.ap-spacer-30{
    height:30px;
}

.ap-spacer-70{
    height:70px;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width:600px){

    .ap-header{

        top:36px;

    }

    .ap-wordmark{

        width:340px;

        max-width:78vw;

    }

    .ap-home-nav{

        position:fixed;

        top:64%;

        left:50%;

        transform:translate(-50%,-50%);

    }

    .ap-footer-logo-link{

        bottom:72px;

    }

    .ap-footer-logo{

        width:105px;

    }

    .ap-copyright{

        left:20px;

        bottom:36px;

        font-size:8px;

    }

    .ap-main{

        padding-top:220px;

        padding-bottom:220px;

        max-width:calc(100vw - 40px);

    }

    .ap-text,
    .ap-contact{

        font-size:14px;

    }

}