@media only screen and (max-width: 1128px) {
    
.portfolio-nav{
    padding-left:16px;
    padding-right:16px;
}

    .card-start {
        margin-left:16px;
        margin-right: 32px;
    }

    .ml-156{
        margin-left:16px;
    }

    .mr-156{
        margin-right:16px;
    }

    .card{
        margin-right: 32px
    }

    .case__header{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header2{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header3{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header-4{
        width: calc(100% - 32px)!important;
        height: 400px;
    }

    .case-title{
        padding-top: 356px;
        }

        .case-title2{
            padding-top: 356px;
            }

    h1{

        font-size: 48px;
        line-height: 64px;
    }

    .pl{
        font-size: 28px;
        line-height: 40px;
    }
    .pm{
        font-size: 24px;
        line-height: 32px;
    }
    .ps{
        font-size: 20px;
        line-height: 30px;
    }

nav{
    padding-top: 104px;
    padding-left: 24px;
    padding-right: 24px;
}

main{
    padding-top: 104px;
    padding-left: 24px;
    padding-right: 24px;
}

footer{
    background-color: #160A21;
    padding-top: 30px;
    padding-bottom:32px;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 0px;
}

.section{
    width: 100%;
}

.mt-160{
    margin-top:40px!important;
}

.ipad-hide{
    display: none!important;
}

.desktop-hide{
    display: block!important;
}

.portfolio-thumbnail{
    width: 50%;
    height: auto;
    display: inline-block;
    
}

.portfolio-content{
    width: calc(50% - 16px);
    height: auto;
    position: relative;
    padding-left: 16px;
    float: right;
}



}

@media only screen and (max-width: 425px) {

    nav{
        padding-top: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    main{
        padding-top: 104px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    footer{
        background-color: #160A21;
        padding-top: 30px;
        padding-bottom:32px;
        padding-left: 16px;
        padding-right: 16px;
        margin-bottom: 0px;
    }
.mobile-hide{
    display: none;
}

#divider{
    margin-top: 80px;
    margin-bottom: 80px;
    display: inline-block;
}


h2{
    font-size: 32px;
    line-height: 48px;
}

.portfolio-thumbnail{
    width: 100%!important;
    height: auto;
    display: inline-block;
    
}

.portfolio-content{
    width: 100%!important;
    height: auto;
    position: relative;
    padding-left: 16px;
    float: none!important;
}

}

@media only screen and (max-width: 1100px) {

.c-50-right{
    max-width: 756px!important;
    width: 100%!important;
    margin:auto;
    float: none;
}

.c-50-left{
    max-width: 756px!important;
    width: 100%!important;
    margin:auto;
    float: none;
}

#content-100{
    max-width: 756px!important;
    width: 100%!important;
    margin:auto;
    float: none;
}

}

@media only screen and (max-width: 756px) {

    #nav-item{
        margin-left: 24px!important;
    }
    
    #nav-item-cn{
        margin-left: 24px!important;
    }
    

    .quote{
        font-size: 36px;
        line-height: 60px;
    }
    

    .about-me-left{
        max-width: 100%!important;
        }

        .column-skills{
            width: 100%!important;
            min-width: 0px!important;
            float:left!important;
            margin-top: 40px;
            
        }

        #SlideRight{
            float: left;
            margin-top: 24px;
        }

        #SlideLeft{
            float: left;
            margin-top: 24px;
        }
        
        .card-wrapper{
            padding-left:16px;
            padding-right:16px;
            margin-top: 24px;
        }

        .card-start{
            margin: auto;
            margin-bottom:32px!important;
            width: 43%!important;
            min-width: 256px;
            height: 400px;

        }
        .cardTitle{
            min-height: 400px;
  
        }

        .card{
            margin-bottom:32px!important;
            margin: auto;
            width: 43%!important;
            min-width: 256px;
            height: 400px


        }

        .item2{
            background: linear-gradient(to bottom , transparent 50%, black),
            url('../media/Redesign-International-Broker.jpg');
            background-size: cover;
            background-position: center;
            background-position-x: 450px;
        }

    main{
        padding-top: 104px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .c-50-right{
        max-width: 756px!important;
        width: 100%!important;
        margin:auto;
        float: none;
        min-width: 0px!important;
    }
    
    .c-50-left{
        max-width: 756px;
        width: 100%!important;
        margin:auto;
        float: none;
        min-width: 0px!important;
    }
    
    #content-100{
        max-width: 756px!important;
        width: 100%;
        margin:auto;
        float: none;
        min-width: 0px!important;
    }

    #content{
        width: 100%!important;
        min-width: 0!important;
    }

    .intro__container{
        min-width: 0;
        width: 100%;
    }

    .text-center{
        text-align: left;
    }

    .case__header{
        width: calc(100% - 32px)!important;
        height: 300px!important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 75% 80%, 0% 80%, 0% 100%, 0 100%);    
    }
    .case__header2{
        width: calc(100% - 32px)!important;
        height: 300px!important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 80%, 0% 80%, 0% 100%, 0 100%);    
    }
    .case__header3{
        width: calc(100% - 32px)!important;
        height: 300px!important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 80%, 0% 80%, 0% 100%, 0 100%);    
    }
    .case__header-4{
        width: calc(100% - 32px)!important;
        height: 300px!important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 75% 80%, 0% 80%, 0% 100%, 0 100%);    
    }


    .case-title{
        padding-top: 275px!important;
        text-align: left;
        margin:0!important;
        width: 100%;
        }

        .case-title2{
            padding-top: 275px!important;
            text-align: left;
            margin:0!important;
            }

        .column3-3{
            float:none!important;
            width: 100%!important;
        }
    
    }



    @media only screen and (max-width: 450px) {

        .case__header{
            width: calc(100% - 32px)!important;
            height: 200px!important;
            clip-path: none!important;
 
        }
        .case__header2{
            width: calc(100% - 32px)!important;
            height: 200px!important;
            clip-path: none!important;
 
        }
        .case__header3{
            width: calc(100% - 32px)!important;
            height: 200px!important;
            clip-path: none!important;
 
        }


        .case__header-4{
            width: calc(100% - 32px)!important;
            height: 200px!important;
            clip-path: none!important;
 
        }
    
        th{
            font-size: 10px;
        }

       .colorpallet{
        width: 40px;
        height: 40px;
        border-radius: 4px;
        }
        .case-title{
            padding-top: 225px!important;
            text-align: left;
            margin:0!important;
            }

            .case-title2{
                padding-top: 225px!important;
                text-align: left;
                margin:0!important;
                }
            h1{

                font-size: 40px;
                line-height: 60px;
            }

            h2{
                font-size: 32px;
                line-height: 48px;
            }

            h3{
                font-size: 28px;
                line-height: 42px;
            }

            h4{
                font-size: 24px;
                line-height: 36px;
            }
        
            .pl{
                font-size: 24px;
                line-height: 36px;
            }
            .pm{
                font-size: 20px;
                line-height: 30px;
            }
            .ps{
                font-size: 18px;
                line-height: 27px;
            }

            section{
                margin-top: 24px;
            }
            .intro__info{
                margin-top:24px;
            }

            #divider-article{
                margin-top:32px;
                margin-bottom:32px
            }

            th{
                padding-top:16px;
            }
    }

@media only screen and (max-width: 1400px) {




    .case__header{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header2{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header3{
        width: calc(100% - 32px)!important;
        height: 400px;
    }
    .case__header-4{
        width: calc(100% - 32px)!important;
        height: 400px;
    }

    .case-title{
        padding-top: 356px;
        }
        .case-title2{
            padding-top: 356px;
            }
}

@media (hover:none) {
    .card-wrapper{
        overflow-x: scroll;
    }

}