@media (max-width: 1280px) {
    .row {
        margin:0;
    }

    #contactModal {
        height: auto;
    }

    section .container, section {
        min-height:auto;
    }

    #expertise a {
        font-size: 7em;
    }

    #mainNav {
        background: #fff;
        width:100%;
    }

    #mainNav .collapse.in {
        padding:0 20px;
    }

    header .intro-text .skills {
        font-size: 1.5em;
    }

    header {
        background-size: cover;
        background-position: center;
    }

    #hire-me p {
        font-size:2em;
    }

    section h2 {
        font-size:1.5em;
    }

    header .container {
        padding:100px 5%;
    }

    #about, #contact {
        padding:50px;
    }

    .portfolio-modal .close-modal .lr, .portfolio-modal .close-modal .lr .rl{
        background: #000;
    }

    .portfolio-modal .close-modal {
        transform: scale(0.7);
        top: 5px;
        right: 5px;
    }

    .carousel-control, .carousel-caption, .carousel-control {
        display: none;
    }

    .container .row .col-xs-12:first-of-type {
        padding:0;
    }
}

@media (max-width: 1024px) {
    #expertise a {
        font-size: 3em;
    }

    #hire-me p {
        font-size: 1.5em;
    }

    section h2 {
        padding-bottom:40px;
    }

    #clients p.quote {
        font-size: 2.5em;
    }

    .subtitle {
        width:70%;
        margin:0 auto;
    }
}

@media (max-width: 800px) {
    section h2 {
        font-size: 1em;
    }

    #clients p.quote {
        font-size: 1.5em;
    }

    .carousel-inner {
        height: 100%;
        width: 80%;
        margin: 0 auto;
    }

    #about p {
        font-size:10pt;
    }
}

@media (orientation: portrait) {
    #l1, #l2, #l3 {
        /*background-size: cover;*/
        /*background-position: center center;*/
        /*height:90vh;*/
        display: none;
    }

    header {
        height:80vh;
    }

    #hire-me {
        padding:7vh 0;
    }

    header .intro-text{
        height: 60vh;
    }

    header .intro-text .skills {
        text-align: center;
        font-size: 3em;
        align-self: center;
        width: 100%;
    }

    header .intro-text .role, header .btn-rounded {
        text-align: center;
        align-self: center;
        float:none;
        font-size: 1.5em;
    }

    header .container {
        display: block;
    }
}

@media (orientation: landscape) {
    #l1 {
        background-position: center center;
    }
}

@media (min-width: 830px) and (max-width: 1280px) {
    header {
        height:75vh;
    }
}