@font-face {
    font-family: open sans;
    src: url("./assets/fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf");
}

@font-face {
    font-family: open sans bold;
    src: url("./assets/fonts/Open_Sans/OpenSans-Bold.ttf");
}


@font-face {
    font-family: CrimsonText;
    src: url("./assets/fonts/Crimson_Text/CrimsonText-SemiBold.ttf");
}

@font-face {
    font-family: CrimsonTextRegular;
    src: url("./assets/fonts/Crimson_Text/CrimsonText-Regular.ttf");
}

@font-face {
    font-family : Spectralsc;
    src: url("./assets/fonts/Spectral_SC/SpectralSC-Regular.ttf");
}

@font-face {
    font-family : SpectralscSemiBold;
    src: url("./assets/fonts/Spectral_SC/SpectralSC-SemiBold.ttf");
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* APP Wanderlust */
.banner_wanderlust {
    width:100%;
    height:100vh;
    background: url("./assets/images/wanderlust/wanderlust_banner_one.jpg");
    background-size: cover;
    background-position: center;
}

.overview_wanderlust {
    width:100%;
    height:120vh;
    display:flex;
    justify-content: center;
    background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);
}

/* APP Wallbloom */
.banner_wallbloom {
    width:100%;
    height:100vh;
    background: url("./assets/images/wallbloom/wallbloom_banner_two.jpg");
    background-size: cover;
    background-position: center;
}

.dark_zone {
    background-color:#242424;
    width:100vw;
    padding: 4% 10%;
}

.dark_zone h2 {
    color:#ffffff;
}



/* APP Luxus Expo */
.banner_luxus_expo {
    width:100%;
    height:100vh;
    background: url("./assets/images/luxus_expo/banner_luxus_expo.jpg");
    background-size: cover;
    background-position: center;
}

/*APP Cat Care*/
.banner_cat_care {
    width:100%;
    height:100vh;
    background: url("./assets/images/cat_care/banner_cat_care.jpg");
    background-size: cover;
    background-position: center;
}

/*APP FIIDI*/
.banner_fiidi {
    width:100%;
    height:100vh;
    background: url("./assets/images/fd/fd_banner.jpg");
    background-size: cover;
    background-position: bottom center;
}

/* Website Coin Elegant */
.banner_coin_elegant {
    width:100%;
    height:100vh;
    background: url("./assets/images/coin_elegant/banner_coin_elegant.jpg");
    background-size: cover;
    background-position: center;
}

/* Website Gem Code */
.banner_gem_code {
    width:100%;
    height:100vh;
    background: url("./assets/images/gem_code/banner_gem_code.jpg");
    background-size: cover;
    background-position: center;
}

#banner-btn {
    width: 256px;
    height: 80px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    animation: dragit 2s ease-in infinite;
}

#banner-btn a {
    width: 256px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: Spectralsc;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
    color:#353535;
    cursor: pointer;
}

.icon-arrow {
    margin:10px 0;
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
}

@keyframes dragit {
    from{
        bottom: 40px;
        opacity: 1;
    }

    to{
        bottom: 10px;
        opacity:0;
    }
}

#gotop-btn {
    transition: visibility 0s, opacity 0.5s ease-out;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    padding: 10px;
    border: solid 1px rgba(255 255 255 / 50%);
    box-shadow: 0px 0px 10px rgb(0 0 0 / 18%);
    backdrop-filter: blur(10px);
    background-color: rgba(255 255 255 / 30%);
    cursor: pointer;
    border-radius: 50%;
}

.hide {
    visibility:hidden;
    opacity:0;
}

#gotop-btn:active {
    background-color:#ffffff;
}

.icon_gotop {
    width:32px;
}
/* section A */
/* overview */
#section_a {
    color:#353535;
}

.main-content-zone {
    padding: 0 16% 10% 16%;
    background-image:linear-gradient(#ffffff, #f0f0f0);
}

.overview {
    padding: 10% 0;
}

.overview_gemcode {
    width: 100%;
    padding: 6% 16% 10% 16%;
    background-color:#f0f0f0;
}

.no-wrap {
    white-space: nowrap;
}

#section_a h3 {
    font-family: open sans bold;
    font-size: 24px;
    text-align: left;
    padding: 4% 0 0 0;
    line-height: 1;
}

#section_a h2 {
    font-family: open sans bold;
    font-size: 36px;
    letter-spacing: 2px;
    text-align: center;
    padding: 4% 0 5% 0;
    line-height: 1;
}

#section_a h2 span {
    font-family: open sans;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
    color:#999999;
    letter-spacing: 2px;
}

.overview_text {
    font-family: open sans;
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.5;
}

.overview_gemcode :nth-child(3) {
    padding-top: 20px;
}

.app_name_wl {
    color:#95A4FC;
    font-weight: bold;
}

.app_name_fd {
    color:#D9B217;
    font-weight: bold;
}

.app_name_le {
    font-family: SpectralscSemiBold;
    font-size:22px;
    letter-spacing: 4px;
    color:#BEAD8E;
}

.app_name_cc {
    color:#C77A60;
}

.infos_ps {
    color: #999999;
}

.img_role {
    width: 60%;
    margin: auto;
    margin-top: 10%;
    display: block;
}

.img_role_wanderlust {
    width: 80%;
    margin: auto;
    margin-top: 10%;
    display: block;
}

/* APP FIIDI */

.img_key_info {
    width: 90%;
    margin: unset;
    margin-top: 10%;
    display: block;
}

.img_user_type {
    width: 90%;
    margin: unset;
    margin-top: 2%;
    margin-bottom: 6%;
    display: block;
}

.img_user_attributes {
    width: 90%;
    margin: unset;
    margin-top: 6%;
    display: block;
}

.img_client_quotes {
    width: 80%;
    margin: auto;
    margin-top: 2%;
    display: block;
}

.placeholder {
    width:100%;
    height:100px;
    background-color:#f0f0f0;
}

/* Project Wallbloom */

.prioritize {
    padding-bottom: 6%;
}

/* Project Gem Code Website */
.main-page-showcase {
   padding:20% 0 0 0;
   display:block;
   position:relative;
}

.p-s {
    color:#999999;
}

.deco-intervalle {
    position:absolute;
    top:-1.3%;
    left: 50%;
    transform: translateX(-50%);
    width:100%;
}

.main-page-img {
    width:100%; 
 }

.secondary-page-showcase {
    padding:3% 0 10% 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.subpage-img1 {
    width:48.5%;
}

.subpage-img2 {
    width:48.5%;
    display:flex;
    flex-direction: column;
    align-items:center;
}

.subpage-img2 img {
    width:100%;
}

.subpage-img2 :nth-child(2) {
    padding-top:32px;
}

.challenge-solutions :nth-child(3) {
    padding: 20px 0;
}

.challenge-solutions img {
    width:96%;
    padding: 8% 0;
    display: block;
    margin:auto;
}

.challenge-solutions :nth-child(7) {
    padding-top: 20px;
}

.challenge-solutions :last-child {
    padding: 8% 0 0 0;
}


/* prototype */
.business_goal {
    padding: 0 0 10% 0;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.design_process {
    padding: 0 0 10% 0;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.phase_l {
    width:100%;
    display: block;
}

.wl_designprocess {
    width:50%;
    display: block;
}

.phase_s {
    display: none;
}

.role_l {
    display: block;
    margin:auto;
    width:70%;
}

.role_s {
    display: none;
}

.container-prototype1 {
    padding: 0 0 2% 0;
}

.container-prototype2 {
    display: none;
}

.prototype1,.prototype2 {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10% 0;
}

.container-prototype1 :nth-child(7) {
    padding:0;
}

.screen_gif {
    width:30%;
}

.description {
    width:50%;
}

.pc_screen_gif {
    width:60%;
}

.pc_description {
    width:30%;
}

.prototype1 h3 {
    font-size: 22px;
    font-family: open sans;
    margin: 20px 0;
    color:#000000;
    font-weight:500;
}

.prototype2 h3 {
    font-size: 22px;
    font-family: open sans;
    margin: 20px 0;
    text-align: right;
    font-weight: 500;
    color:#000000;
}

.prototype1 p {
    font-family: open sans;
    font-size: 18px;
    line-height: 1.5;
}

.prototype2 p {
    font-family: open sans;
    font-size: 18px;
    line-height: 1.5;
    text-align: right;
}

/* research */
.brainstorming {
    padding: 0 0 10% 0;
}

.img_brainstorm_l {
    width:100%;
    padding: 6% 0 0 0;
    display: block;
    margin:auto;
}

.img_brainstorm_s {
    display: none;
}

.market_research {
    padding: 0 0 10% 0;
}

.img_market_l {
    width:100%;
    padding: 1% 0 0 0;
    display: block;
    margin:auto;
}

.img_market_s {
    display: none;
}

.qualitative_research {
    padding: 0 0 10% 0;
}

.img_qualitative {
    margin:auto;
    display: block;
    width: 60%;
    padding: 3% 0 0 0;
}

.quantitative_research {
    padding: 0 0 10% 0;
}

.img_quantitative_l {
    width:100%;
    padding: 1% 0 0 0;
    display: block;
    margin:auto;
}

.img_quantitative_s {
    display:none;
}

.main_pain_points {
    width:80%;
    padding: 10% 0 0 0;
    display: block;
    margin:auto;
}

.competitors {
    width:80%;
    padding: 4% 0 0 0;
    display: block;
    margin:auto;
}

.logic_deduction {
    width:80%;
    padding: 4% 0 0 0;
    display: block;
    margin:auto;
}

.persona {
    padding: 0 0 10% 0;
}

.img_persona_cc {
    width:100%;
    padding: 1% 0 0 0;
}

.img_persona_le {
    width:80%;
    padding: 1% 0 0 0;
    margin:auto;
    display: block;
}

.empathy_map {
    padding: 0 0 10% 0;
}

.competitive_audit {
    padding: 0 0 10% 0;
}

.original_design {
    padding: 0 0 10% 0;
}

/* define the problem */
.kpis {
    font-family: open sans;
    font-size:16px;
    line-height: 1.5;
}

.define_problem {
    padding: 0 0 10% 0;
}

.analyse_problem_l {
    padding: 1% 0 0 0;
}

.analyse_problem_s {
    display: none;
}

.analyse_problem_l article p {
    font-family: open sans;
    font-size:16px;
    line-height: 1.5;
}

.define_problem h5 {
    font-family: open sans;
    font-size:20px;
    padding: 3% 0;
    line-height: 1.5;
}

.keywords_wl {
    color:#95A4FC;
}

.keywords_cc{
    color:#C77A60;
}

.keywords_le {
    color:#BEAD8E;
}

/* key features */
.key_features {
    padding: 0 0 10% 0;
}

.img_features {
    width:100%;
    padding: 4% 0 0 0;
}

/* mind-mapping */
.mind_mapping {
    padding: 0 0 10% 0;
}

.img_mapping {
    width:100%;
    padding: 1% 0 0 0;
}

.information_architecture {
    padding: 0 0 10% 0;
}

/* UX Flow */
.ux_flow {
    padding: 0 0 10% 0; 
}

.img_uxflow {
    width:100%;
    padding: 2% 0 0 0;
}

.iteration {
    padding: 0 0 10% 0; 
}

/* Wireframe */
.wireframe {
    padding: 0 0 10% 0; 
}

.img_wireframe {
    width:100%;
    padding: 2% 0 0 0;
}

.screen_analyse{
    padding: 0 0 10% 0; 
}

/* Final Design */

.show_design1,.show_design2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3% 0;
}

.show_design1 img {
    width:26%;
}

.show_design2 img {
    width:26%;
}

/* section B - explorer plus */
#section_b {
    position: relative;
    width:100%;
    padding-bottom: 10%;
    background-color:#f0f0f0;
}

#section_b h2 {
    font-family: SpectralSC;
    color:#353535;
    font-size:36px;
    letter-spacing: 4px;
    text-align: center;
    margin:0 8%;
    padding: 0 0 1% 0;
    font-weight: normal;
}

.container-gradient {
    background-image: linear-gradient(#f0f0f0, #d9d9d9);
}



/*For Extra-Big Screen - pc screen*/
@media screen and (min-width:1280px) {

/* section B - explorer plus */
.preview-work-s {
    display: none;
}

.container-mywork {
    width:100%;
    padding: 0 16%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
}

#section_b figure {
    display:block;
    width:340px;
    height:220px;
    margin: auto;
    margin-top: 70px;
    overflow: hidden;
}

.container-mywork2 {
    width:44%;
    margin: 0 28%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
}

#section_b figcaption {
    font-family: open sans;
    font-size: 18px;
    color:#6D6D6D;
    letter-spacing: 3px;
    text-align: center;
    transform: translateY(300%);
    opacity:0;
}

.works-preview {
    width:340px;
    height: auto;
    transform: translateY(10%);
    filter:brightness(0.93);
}

#section_b figure:hover {
    overflow: none;
}

#section_b figure:hover .works-preview{
    transform: scale(0.99) translateY(0);
    transition-duration: 0.5s;
    filter:brightness(1);
}

#section_b figure:hover figcaption{
    transform: translateY(0);
    transition-duration: 0.5s;
    opacity: 1;
}
        
        
}


/*For Big Screen - laptop screen & iPad Horizontal Screen*/
@media screen and (min-width:1000px) and (max-width:1279px) {


    /* section A */
        .main-content-zone {
            padding: 0 8% 6% 8%;
        }

        
        #section_a h3 {
            font-size: 22px;
        }

        #section_a h2 {
            font-size: 28px;
        }

        .dark-zone {
            padding:4% 6%;
        }

        .overview_text {
            font-size: 18px;
        }

        .prototype1 h3 {
            font-size: 20px;
        }

        .prototype1 p {
            font-size: 16px;
        }

        .prototype2 h3 {
            font-size: 20px;
        }

        .prototype2 p {
            font-size: 16px;
        }

        .img_brainstorm_l {
            width: 100%;
        }

        .img_market_l {
            width: 100%;
        }

        .img_quantitative_l {
            width: 100%;
        }

        .kpis {
            font-size: 14px;
        }

        .analyse_problem_s {
            display: none;
        }

        .define_problem h5 {
            font-size: 18px;
        }

        .analyse_problem_l article p {
            font-size: 14px;
        }

        /* Project Gem Code Website */
        .overview_gemcode {
            width: 100%;
            padding: 6% 8% 10% 8%;
            background-color: #f0f0f0;
        }
        
        /* APP FIIDI */
        .placeholder {
            width:100%;
            height:60px;
            background-color:#f0f0f0;
        }
    

    /* For section B */
       #section_b {
           position: relative;
           width: 100%;
           padding: 2% 0 12% 0;
           background-color: #f0f0f0;
       }

        #section_b h2 {
            font-size: 28px;
        }

        .preview-work-s {
            display: none;
        }

        #section_b .container-mywork {
            width:84%;
            margin: 0 8%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items:center;
        }


        #section_b figure {
            display: block;
            width: 340px;
            height: 220px;
            margin: auto;
            margin-top: 6%;
            overflow: hidden;
        }

        #section_b figcaption {
            font-family: open sans;
            font-size: 18px;
            color:#6D6D6D;
            letter-spacing: 3px;
            text-align: center;
        }

        .works-preview {
            width:340px;
            height: auto;
            transform: translateY(10px);
        }

}



/*For medium screen - iPad Vertical Screen*/
@media screen and (min-width:600px) and (max-width:999px) {
    
    /* APP Wanderlust */
    .banner_wanderlust {
        width: 100%;
        height: 50vh;
        background: url(./assets/images/wanderlust/wanderlust_banner_one.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }
    
    /* APP Wallbloom */
        .banner_wallbloom{
            width: 100%;
            height: 50vh;
            background: url(./assets/images/wallbloom/wallbloom_banner_two.jpg);
            background-size: cover;
            background-position: center;
            position: relative;
        }

    /* APP Cat Care */
        .banner_cat_care {
            width: 100%;
            height: 50vh;
            background: url(./assets/images/cat_care/banner_cat_care.jpg);
            background-size: cover;
            background-position: center;
            position: relative;
        }

    /*APP FIIDI*/
        .banner_fiidi {
            width:100%;
            height:50vh;
            background: url("./assets/images/fd/fd_banner.jpg");
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .img_user_type {
            width:100%;
        }

        .img_user_attributes {
            width:100%;
        }


    /* Website Coin Elegant */
        .banner_coin_elegant {
            width: 100%;
            height: 45vh;
            background: url(./assets/images/coin_elegant/banner_coin_elegant.jpg);
            background-size: cover;
            background-position: center;
            position: relative;
    }    

    /* Website Gem Code */
        .banner_gem_code {
            width:100%;
            height:50vh;
            background: url("./assets/images/gem_code/banner_gem_code.jpg");
            background-size: cover;
            background-position: center;
        }

        #banner-btn {
            display: none;
        }

        /* section A */
        .main-content-zone {
            padding: 0 8% 6% 8%;
        }
        
        #section_a h3 {
            font-size: 20px;
        }

        #section_a h2 {
            font-size: 26px;
        }

        .dark-zone {
            padding: 4% 4%;
        }

        .overview_text {
            font-size: 16px;
        }

        .overview_wanderlust {
            height:100vh;
        }

        .phase_l {
            display: none;
        }

        .wl_designprocess {
            display: none;
        }
        
        .phase_s {
            width:100%;
            display:block;
        }

        .role_l {
            display: none;
        }

        .role_s {
            width:100%;
            display: block;
            margin:auto;
        }
        
        .prototype1 h3 {
            font-size: 20px;
        }

        .prototype1 p {
            font-size: 16px;
        }

        .prototype2 h3 {
            font-size: 20px;
        }

        .prototype2 p {
            font-size: 16px;
        }

        .img_brainstorm_l {
            width:100%;
        }

        .img_market_l {
            width: 100%;
        }

        .img_quantitative_l {
            width: 100%;
        }
    
        .img_persona_le {
            width:100%;
            padding: 1% 0 0 0;
        }

        .kpis {
            font-size: 14px;
        }

        .analyse_problem_s {
            display: none;
        }

        .define_problem h5 {
            font-size: 18px;
        }

        .analyse_problem_l article p {
            font-size: 14px;
        }
    
        /* Project Gem Code Website */
        .overview_gemcode {
            width: 100%;
            padding: 6% 8% 10% 8%;
            background-color: #f0f0f0;
        }
        

        /* For Section B */
        #section_b {
            position: relative;
            width: 100%;
            padding: 4% 0 12% 0;
            background-color: #f0f0f0;
        }
        
        #section_b h2 {
            font-size: 26px;
            padding:0;
        }

        .preview-work-l {
            display:none;
        }

        #section_b figcaption {
            font-family: open sans;
            font-size: 18px;
            color:#6D6D6D;
            letter-spacing: 3px;
            text-align: center;
        }
        
        .works-preview {
            width:340px;
            height: auto;
            transform: translateY(10px);
        }

        #section_b figure {
            display: block;
            width: 340px;
            height: 220px;
            margin: auto;
            margin-top: 6%;
            overflow: hidden;
        }

        #section_b figcaption {
            font-family: open sans;
            font-size: 18px;
            color:#6D6D6D;
            letter-spacing: 3px;
            text-align: center;
        }

        .works-preview {
            width:340px;
            height: auto;
            transform: translateY(10px);
        }
}


/*For Small Screen - Mobile Phone Screen*/
@media screen and (max-width:599px) {
    
    /* APP Wanderlust */
    .banner_wanderlust {
        width: 100%;
        height: 33vh;
        background: url(./assets/images/wanderlust/wanderlust_banner_one.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* APP Wallbloom */
    .banner_wallbloom {
        width: 100%;
        height: 33vh;
        background: url(./assets/images/wallbloom/wallbloom_banner_two.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* APP Luxus Expo */
    .banner_luxus_expo {
        width: 100%;
        height: 33vh;
        background: url(./assets/images/luxus_expo/banner_luxus_expo.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* APP Cat Care */
    .banner_cat_care {
        width: 100%;
        height: 33vh;
        background: url(./assets/images/cat_care/banner_cat_care.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /*APP FIIDI*/
    .banner_fiidi {
        width:100%;
        height:33vh;
        background: url("./assets/images/fd/fd_banner.jpg");
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* Website Coin Elegant*/
    .banner_coin_elegant {
        width: 100%;
        height: 30vh;
        background: url(./assets/images/coin_elegant/banner_coin_elegant.jpg);
        background-size: cover;
        background-position: center;
        position: relative;
    }

    /* Website Gem Code */
    .banner_gem_code {
        width:100%;
        height:30vh;
        background: url("./assets/images/gem_code/banner_gem_code.jpg");
        background-size: cover;
        background-position: center;
        position: relative;
    }

    #banner-btn {
        display: none;
    }

    /* section A */
    .main-content-zone {
        padding: 0 8% 6% 8%;
    }

    #section_a h3 {
        font-size: 18px;
    }

    #section_a h2 {
        font-size: 22px;
        padding: 4% 0 8% 0;
    }

    .dark-zone {
        padding: 4%;
    }

    #section_a h2 span {
        font-size: 11px;
    }

    .overview {
        padding: 10% 0 16% 0;
    }

    .overview_gemcode {
        padding: 10% 8% 16% 8%;
        background-color:#f0f0f0;
    }

    .app_name_le {
        font-family: SpectralscSemiBold;
        font-size: 14px;
        letter-spacing: 4px;
        color: rgb(190, 173, 142);
    }

    .overview_text {
        font-size: 13px;
    }

    .overview_wanderlust {
        height:27vh;
    }

    .img_role {
        width: 100%;
    }

    .img_role_wanderlust {
        width: 100%;
    }   

    .img_key_info {
    width: 100%;
    margin: unset;
    margin-top: 10%;
    display: block;
    }

    .img_user_type {
    width: 100%;
}
    .img_user_attributes {
        width:100%;
    }

    .img_client_quotes {
        width:100%;
    }

    .business_goal {
        padding: 0 0 16% 0;
    }

    .design_process {
        padding: 0 0 16% 0;
    }

    .phase_l {
        display: none;
    }
    
    .wl_designprocess {
        display: none;
    }

    .phase_s {
        width:100%;
        display:block;
    }
    
    .role_l {
        display: none;
    }

    .role_s {
        display: block;
        width:100%;
        margin: auto;
    }

    .container-prototype1 {
        display: none;
    }
    
    .container-prototype2 {
        display: block;
        padding: 0;
    }
    
    .prototype {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 16% 0;
    }

    .screen_gif {
        width: 90%;
    }

    .description {
        width: 86%;
    }

    .prototype h3 {
        font-size: 16px;
        font-family: open sans;
        margin: 20px 0;
    }
 
    .prototype p {
        font-family: open sans;
        font-size: 13px;
        line-height: 1.5;
    }

    .brainstorming {
        padding: 0 0 16% 0;
    }

    .img_brainstorm_l {
        display: none;
    }

    .img_brainstorm_s {
        width: 90%;
        padding: 3% 0 0 0;
        display: block;
        margin: auto;
    }

    .market_research {
        padding: 0 0 16% 0;
    }

    .img_market_l {
        display: none;
    }

    .img_market_s {
        width: 90%;
        padding: 3% 0 0 0;
        display: block;
        margin: auto;
    }

    .quantitative_research {
        padding: 0 0 16% 0;
    }

    .img_quantitative_l {
        display: none;
    }

    .img_quantitative_s {
        width: 90%;
        padding: 4% 0 0 0;
        display: block;
        margin: auto;
    }

    .main_pain_points {
        width: 100%;
    }

    .competitors {
        width: 100%;
    }

    .logic_deduction {
        width: 100%;
    }

    .qualitative_research {
        padding: 0 0 16% 0;
    }

    .img_qualitative {
        width: 90%;
        padding: 4% 0 0 0;
    }

    .persona {
        padding: 0 0 16% 0;
    }

    .img_persona_cc {
        width: 90%;
        padding: 4% 0 0 0;
        display: block;
        margin:auto;
    }

    .img_persona_le {
        width: 90%;
        padding: 4% 0 0 0;
        display: block;
        margin:auto;
    }

    .empathy_map {
        padding: 0 0 16% 0;
    }

    .competitive_audit {
        padding: 0 0 16% 0;
    }

    .original_design {
        padding: 0 0 16% 0;
    }

    .define_problem {
        padding: 0 0 16% 0;
        width: 90%;
        margin: auto;
    }

    .define_problem h5 {
        font-size: 14px;
        font-weight: 600;
    }

    .analyse_problem_l {
        display: none;
    }

    .analyse_problem_s {
        display: block;
    }

    .analyse_problem_s article p {
        font-size: 13px;
        font-family: open sans;
        line-height: 1.5;
    }
    
    .analyse_problem_s article {
        padding-bottom: 8%;
    }

    .key_features {
        padding: 0 0 16% 0;
    }

    .img_features {
        width: 90%;
        padding: 4% 0 0 0;
        margin: auto;
        display: block;
    }

    .mind_mapping {
        padding: 0 0 16% 0;
    }

    .img_mapping {
        width: 96%;
        padding: 4% 0 0 0;
        margin: auto;
        display: block;
    }

    .information_architecture {
        padding: 0 0 16% 0;
    }

    .ux_flow {
        padding: 0 0 16% 0;
    }

    .iteration {
        padding: 0 0 16% 0;
    }

    .wireframe {
        padding: 0 0 16% 0;
    }

    .img_uxflow {
        width: 92%;
        padding: 4% 0 0 0;
        margin: auto;
        display: block;
    }

    .img_wireframe {
        width:92%;
        padding: 4% 0 0 0;
        margin: auto;
        display: block;
    }

    .screen_analyse {
        padding: 0 0 16% 0;
    }

    .show_design1, .show_design2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-top: 7%;
        padding-bottom:0;
    }

    .show_design2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 7%;
        padding-top:0;
    }


    .show_design1 img {
        width: 90%;
        padding-bottom: 10%;
    }

    .show_design2 img {
        width: 90%;
        padding-bottom: 10%;
    }

    /* Project Gem Code Website */
    .secondary-page-showcase {
        padding: 4% 0 16% 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subpage-img1 {
        width: 100%;
    }

    .subpage-img2 {
        width: 100%;
        padding-top: 4%;
    }

    .subpage-img2 :nth-child(2) {
        padding-top: 4%;
    }

    .challenge-solutions img {
        width: 100%;
    }

    .challenge-solutions {
        padding-bottom:16%;
    }

    /* For Section B */
    #section_b {
        position: relative;
        width: 100%;
        padding-bottom: 16%;
        background-color: #f0f0f0;
    }

    .preview-work-l {
        display: none;
    }

    #section_b h2 {
        font-size: 22px;
        padding: 0 0 2% 0;
    }

    #section_b figure {
        display:block;
        width:100%;
        height:100%;
        margin: auto;
        margin-top: 10%;
        overflow: hidden;
    }

    #section_b figcaption {
        font-family: open sans;
        font-size: 16px;
        color:#6D6D6D;
        letter-spacing: 3px;
        text-align: center;
    }
    
    .works-preview {
        width:84%;
        height: auto;
        margin: 0 8%;
        transform: translateY(10px);
    }

}