@media only screen and (orientation: portrait) {

    @media only screen and (min-width: 767px) {

        .section {
            scroll-margin-top: 62px;
        }
        .landing-logo {            
            width: 250px;
        }
        .landing-overlay h1 {
            font-size: 140%;
        }
        .categories {            
            padding: 25px 20px;
            max-width: 800px;
        }
        .categories li {
            padding: 0 10px;
            font-size: 100%;
        }
        .portfolio-item {
            width: 50%;
        }
        .about-caption {
            padding: 60px;
            font-size: 110%;
        }
        .about-logo {
            width: 150px;
        }
        .services-wrapper {
            padding: 60px;
        }
        .section-heading-2 {
            font-size: 100%;
        }
        .section-heading-2 p {
            padding-bottom: 10px;
        }
        .card {
            margin-top: 30px;
            width: calc(50% - 15px);
            font-size: 110%;
        }
        .team-heading .section-heading {
            padding: 60px 60px;
        }
        .team-members {
            display: flex;
        }
        .team-luis .section-heading,
        .team-oriol .section-heading {
            margin: 0 5%;
        }
        .team-luis {
            order: 1;
        }
        .form-wrapper {
            padding: 60px;
            font-size: 110%;
        }
        
    }

}

@media only screen and (orientation: landscape) {

    .section {
        padding-left: 80px;
        scroll-margin-top: 0;
    }    
    .landing-overlay {
        height: 100vh;
    }
    .landing-logo {
        width: 150px;
    }
    .about-caption {
        padding: 50px;
    }
    .services-wrapper {
        padding: 50px;
    }
    .team-members {
        display: flex;
    }
    .team-luis .section-heading,
    .team-oriol .section-heading {
        margin: 0 10px;
        font-size: 60%;
    }
    .team-luis,
    .team-oriol {
        height: 35vw;
        min-height: 150px;
    }
    .team-luis {
        order: 1;
        
    }
    

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

        .portfolio-item {
            width: 50%;
        }

    }
    @media only screen and (min-width: 767px) {

        .portfolio-item {
            width: 33.33%;
        }
        .about-wrapper {    
            background-position: center;
            background-attachment: fixed;
        }
        .card {
            margin-top: 30px;
            width: calc(50% - 15px);
            /* font-size: 110%; */
        }
        .team-heading .section-heading {
            padding: 60px 60px;
        }
        .team-luis .section-heading,
        .team-oriol .section-heading {
            margin: 0 10%;
            font-size: 1vw;
        }
        .form-wrapper {
            padding: 60px;            
        }

    }    
    @media only screen and (min-width: 1279px) {

        .portfolio-item {
            width: 25%;
        }
        .services-wrapper {
            flex-direction: row;
            align-items: center;
        }
        .services-caption {
            order: 1;
        }
        .cards-wrapper {
            padding-right: 60px;
        }
        .card {
            margin: 15px 0;
            width: calc(33.33% - 15px);
        }

    }

    @media only screen and (min-height: 579px) {

        .section {
            padding-left: 120px;
        }
        .test {
            scroll-margin-top: 0;
            min-height: 100vh;
        }
        .landing-logo {
            width: 200px;
        }
        .landing-overlay h1 {
            font-size: 125%;
        }
        .categories {
            padding: 20px;
            max-width: 800px;
        }
        .categories li {
            font-size: 85%;
        }
        .about-caption {
            padding: 60px;
            width: 66%;
            font-size: 95%;
        }
        .about-logo {
            width: 15vh;
        }
        .services-wrapper {
            padding: 60px;
        }

    }

    @media only screen and (min-height: 769px) {

        .section {
            padding-left: 180px;
        }        
        .landing-logo {
            width: 300px;
        }
        .landing-overlay h1 {
            font-size: 150%;
        }
        .categories li {
            padding: 0 10px;
            font-size: 100%;
        }
        .about-caption {            
            font-size: 100%;
        }
        .team-heading p {
            font-size: 120%;
        }
        .contact-heading p,
        .field-name,
        .field-email,
        .field-subject,
        textarea {
            font-size: 100%;
        }
        

    }

    @media only screen and (min-height: 901px) {
       
        .section {
            padding-left: 240px;
        }
        .landing-logo {
            width: 300px;
        } 
        .about-caption {
            padding: 100px;
            width: 60%;
        }       

    }

}