@media only screen and (min-device-width: 0) and (max-device-width: 765px) {
    body {
        overflow-x: hidden;
    }
    .mobile {
        display: block;
    }
    .desktop, #portfolio-link, #contact-link, #counters, div.vertical-line, div.point-menu {
        display: none;
    }
    div.img_links {
        display: none;
    }
    #page_container {
        width: 100%;
        overflow-x: hidden;
    }
    h1.hero {
        font-size: 4rem;
        line-height: 4rem;
        margin-top: 20px;
    }
   #home .container {
        padding-left: 10px;
    }
  /*   #home{
        padding-top: 150px;
        padding-bottom: 150px;
    }*/
    #header-menu {
        right: 15px;
        top: 15px;
    }
    #logo {
        left: 15px;
        top: 15px;
    }
    #portfolio-link {
        left: 15px;
        bottom: 15px;
    }
    #contact-link {
        right: 15px;
        bottom: 15px;
    }
    #about .portrait {
        text-align: center;
        float: none;
        margin-right: 0px;
        margin-bottom: 30px;
    }
    h1 {
        font-size: 2.5rem;
        line-height: 50px;
    }
    #header-menu-section ul {
        padding-left: 0px;
    }
    #header-menu-section ul li a {
        font-size: 2rem;
    }
    #close a img {
        margin-right: 15px;
    }
    .software {
        display: block;
    }
    #skills article.software {
        padding-bottom: 0px;
    }
    .software .col-3 {
        max-width: 100%;
    }
    #footer .col-6 {
        display: contents;
    }
    .footer-animation img {
        width: 100%;
    }
    #works-essetre .right-element{
        padding-top: 10px;
        padding-left: 15px;
    }
    #works-mamas .right-element, #works-antikwein .right-element, #works-fintech .right-element, #works-rest-app .right-element,
     #works-wejoin .right-element, #works-caty-forden .right-element{
        padding-top: 10px;
        padding-left: 15px;
    }
    .container, #works-fintech .container, #works-rest-app .container, #styleguide-restaurant .container,
    #pp-fintech .col-lg-4, #paper-wireframe-fintech .col-lg-4, #final-work-fintech .container, 
    #styleguide-fintech .font, #paper-wireframe-fintech .container, #pp-fintech .container, 
    .skills, #works-antikwein .container, .post-it, #styleguide-aw .container, #styleguide-aw .col-lg-6, #wireframe-aw .container, 
    #wireframe-aw .col-lg-3, #styleguide-wejoin .container, #styleguide-wejoin .col-lg-6, #ui-design .container, 
    #ui-design .col-lg-6, #final-work-wejoin .container, #final-work-wejoin .col-lg-12, #userflow-app .container, #userflow-app .col-lg-12, 
    #paper-wireframe-app .container, #paper-wireframe-app .col-lg-4, #final-work-app .container, #final-work-app .col-lg-12, #styleguide-fintech,
    #digital-wireframe-fintech .container, #low-fi-fintech .container, #sitemap-aw .container, #aw-usertesting .container, #aw-usertesting .col-lg-6.center,
    #styleguide-aw .container, #styleguide-aw .col-lg-12, #aw-mockup .container, #aw-hifi-prototype .container, #final-work-aw .container,
    #logo-wejoin .container, #wejoin-wireframe .container, #mockup-wejoin .container, #mockup-wejoin .col-lg-6, #paper-wireframe-app .col-lg-6,
    #digital-wireframe-rest .container, #low-fidelity-prototype .container, #mockup-restaurant .container, #hi-fi-prototype-restaurant .container,
    #works-mamas .container, #styleguide-mamas .container, #styleguide-mamas .color, #styleguide-mamas .font,#digital-wireframe-mamas .container,
    #mockups-mamas .container, #final-work-mamas .container, #works-caty-forden .container, #business-card-caty .container, #business-card-caty .color, #business-card-caty .font,
    #brochure-caty .color, #brochure-caty .font, #poster-caty .container, #poster-caty .color, #poster-caty .font, #flyer-caty .container, #flyer-caty .color, #flyer-caty .font,
    #story-essetre .container .col-lg-6, #styleguide-essetre .col-lg-6, #logo-essetre .container, #portfolio, #skills{
        padding-left: 0px;
        padding-right: 0px;
    }
    .post-it .row, .post-it .row .col-lg-12 {
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }
    #paper-wireframe-fintech, #pp-fintech, #styleguide-fintech, #works-fintech, #works-google, #google-understanding, #pw-google, #dw-google, 
    #logo-fintech, #works-rest-app, #userflow-app, #userflow-app, #final-work-fintech, #lf-prototype-google, #refine-google, #styleguide-google,
    #portfolio, #process, #skills, #about, #works-antikwein, #aw-usertesting, #styleguide-aw, #mockups-google, #hi-fi-prototype-google, #final-google,
    #wireframe-aw, #final-work-aw, #works-wejoin, #styleguide-wejoin, #ui-design, #paper-wireframe-app, 
    #final-work-app, #digital-wireframe-fintech, #wireframe-fintech3, #final-work-wejoin,
    #styleguide-restaurant, #digital-wireframe-rest, #low-fidelity-prototype,
    #mockup-restaurant, #low-fi-fintech, #sitemap-aw, #aw-mockup, #aw-hifi-prototype, #logo-wejoin,
    #wejoin-wireframe, #mockup-wejoin, #footer section, #low-fidelity-prototype.animation, #hi-fi-prototype-restaurant,
    #works-mamas, #styleguide-mamas, #sitemap-mamas, #digital-wireframe-mamas, #mockups-mamas, #final-work-mamas, #logo-essetre, #bookmark-essetre,
    #works-caty-forden, #business-card-caty, #brochure-caty, #poster-caty, #flyer-caty, #works-essetre, #story-essetre, #styleguide-essetre {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    footer section {
        padding-bottom: 0px;
    }
    article.selected-project {
        padding-left: 0px;
    }
    .selected-project .work {
        position: absolute;
        z-index: 10;
    }
    .creative {
        text-align: center;
    }
    .creative img {
        width: 70px;
    }
    .final-logo img {
        width: 100px;
    }
    .final-logo {
        flex-wrap: wrap;
    }
    img.logo{
        width: 45%;
    }
    .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(0, 0, 0, 0);
    }
    .work {
        margin-top: 36%;
    }
    .wejoinrow .work {
        margin-top: 350px;
    }
    .row-appwork .work {
        margin-top: 100px;
    }
    .selected-project .restapp {
        margin-top: 0px;
    }
    .mobile-contact {
        display: flex;
    }
    .animation img {
        display: none;
    }
    .font-lato-f3 {
        font-size: 24px;
    }
    .font-roboto-aw3 {
        font-size: 19px;
    }
    .font-lato-f4 {
        font-size: 22px;
    }
    .font-roboto-aw4 {
        font-size: 17px;
    }
    .font-lato-f5 {
        font-size: 20px;
    }
    .font-roboto-aw5 {
        font-size: 15px;
    }
    #final-work-fintech img {
        width: 100%;
    }
    .right-element {
        padding-top: 10px;
        padding-left: 15px;
    }
    #styleguide-aw .col-lg-2 {
        padding-left: 0px;
    }
    .top-space {
        margin-top: 30px;
    }
    #styleguide-wejoin .col-lg-6 img {
        width: 100%;
    }
    .titlework {
        display: none;
    }
    .first {
        font-size: 20px;
    }
    div.color {
        margin-top: 20px;
        margin-bottom: 20px;
        padding-left: 15px;
    }
    .padding-title {
        padding-left: 15px;
    }
    #styleguide-fintech .font, #styleguide-fintech h1 {
        padding-left: 15px;
    }
    #prev_next_link_container {
        margin-top: 30px;
    }
    div.ui-color .col-lg-2 {
        width: 50%;
        float: left;
    }
    div.ui-color .col-lg-2 img {
        width: 100%;
    }
    #styleguide-restaurant .col-lg-3, #styleguide-wejoin .col-lg-3 {
        width: 50%;
    }
    #paper-wireframe-app .col-lg-3 {
        margin-bottom: 40px;
    }

    .laarsseith1 {
        font-size: 26px;
    }
    .laarsseith2 {
        font-size: 24px;
    }
    .laarsseith3 {
        font-size: 22px;
    }
    .laarsseith4 {
        font-size: 20px;
    }
    #logo-fintech, #final-work-aw {
        height: 100% !important;
    }
    #final-work-wejoin, #final-work-app, #aw-usertesting {
        height: 100%!important;
    }
    #skills .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }
    div.e-mail-contact, div.mobile-contact {
        width: inherit;
    }
    img.img-footer {
        width: 40px;
    }
    .img-process img {
        margin: 0 auto;
        display: block;
        width: fit-content;
    }
    #about .portrait img {
        width: 60%;
    }
    #goup {
        display: none;
        position: fixed;
        bottom: 30px;
        right: 15px;
    }
    #goup.dark line, #goup.dark path {
        stroke: #2A2C3A;
    }
    #paper-wireframe-app img{
        margin-bottom: 10px;
    }
    .logo-left{
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
    #styleguide-mamas .container img, #sitemap-mamas .container img{
        width: inherit;
    }
    .raleway-h1-mamas{
        font-size: 30px;
    }
    .raleway-h2-mamas{
        font-size: 26px;
    }
    #business-card-caty img{
        width: inherit;
        max-width: 656px;
    }
    #brochure-caty .center img{
        width: inherit;
        max-width: 600px;
    }
    #brochure-caty .foto-big img{
        width: inherit;
    }
    #flyer-caty .center img{
        width: inherit;
    }
    #logo-essetre .col-lg-6 img{
         width: -webkit-fill-available;      
    }
    .space-up-loghi{
        margin-top: 0px;
    }
    .bookmark img{
        width: auto;
    }
    #final-work-essetre img{
        width: inherit;
    }
    #contact .container, #logo-fintech .container, #sitemap-mamas .container, #brochure-caty .container, #about .container, #process .container{
        padding-left: 15px;
        padding-right: 15px;
    }
    .bookmark {
        text-align: -webkit-center;
    }
    .font-myriad{
        font-size: 40px;
        line-height: 70px;
    }
    .font-myriad-bold{
        font-size: 40px;
        line-height: 70px;    
    }
    .alphabet{
        padding: 15px;
    }
    #works-essetre{
        background-position-x: 30%;    
        background-position-y: 83px;
    }
    #works-caty-forden{
        background-position-x: 50%;
    }
    div.p-blue{
        margin-right: 10px;
    }
    .padding-mobile{
        padding-left: 0px;
        padding-right: 0px;
    }
    #mockup-wejoin .container-fluid, #mockup-wejoin{
        padding-right: 0px;
    }
    #google-understanding{
        padding-left: 15px;
        padding-right: 15px;
    }
    #final-google .mobile{
        padding-right: 0px;
        padding-left: 0px;
    }
    #final-google{
        height: 100%;
        
    }
}