/* Mobile */
@media (max-width: 767px){

    .container, .container-sm {
        max-width: 750px;
    }

    .navbar-brand {
        padding:0;
        margin-right: 0;
        width: 9em;
        padding-left: 0.5em;
    }

    .navbar-nav {
        padding: 0 0 0.5em;
        width: auto;
    }

    .navbar-toggler {
        padding: .25rem .75rem;
        font-size: 1.5em;
        color: #fff;
    }

    header {
        padding: 0.5em 0;
        position: fixed;
        background: #277032;
        height: 4.7em;
    }
    
    .mobi-nopad{
        padding:0;
    }
    
    .mobi-hide{
        display:none;
    }

    .navbar-expand-lg .navbar-collapse {
        background-color: #277032;
        position: relative;
        top: 0.5em;
    }

    .last-item {
        margin-right: auto!important;
    }

    .navbar-expand-lg .navbar-collapse .nav-link {
        padding: 0.1em 0;
        margin: 0.3em auto 0;
        text-align: center;
        width: fit-content;
    }

    .head-bottom {
        /* background-size: 100%; */
        bottom:1em;
        padding: 1em 0;
        height: auto;
    }

    .head-info {
        width: 100%;
        left: 0;
        top: 0;
        transform: none;
        padding-top: 2em;
    }
    
    .head-box {
        height: auto;
        padding: 4em 0 2em;
    }

    .home-head {
        height: auto;
    }

    .head-gallery img {
        width: 100%;
        max-width: 25em;
        float: none;
        margin: 0 auto 1em;
        border-radius: 1em;
        display: flex;
    }

    .head-bottom p {
        margin-bottom: 2em;
    }

    .head-gallery {
        bottom: 0;
        padding-top: 2em;
    }

    .team-intro p {
        font-size: 1.2rem;
    }

    .our-services {
        padding: 1em 0;
    }

    .head-info p {
        padding: 0 1em;
        font-size: 1.2rem;
    }

    .our-services .col-md-6 {
        padding: 0;
    }

    .fa-ul>li {
        color: #000;
        line-height: 2;
    }

    .meet-team {
        padding: 0;
        flex-direction: column-reverse;
    }

    .meet-box {
        position: relative;
        right: 0;
        top: 0;
        transform: none;
    }

    .project-box {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
    }

    .meet-box, .project-box {
        padding: 1em 1em 2em;
        width: auto;
        /* max-width: 31em;
        margin: 0 auto; */
    }

    .team-image, .project-image {
        height: 18em;
        /* max-width: 31em;
        margin: 0 auto; */
    }

    .our-projects {
        padding-bottom: 2em;
        flex-direction: column;
    }

    .foot-logo {
        width: 6em;
    }

    .footer {
        background-size: contain;
        padding-bottom: 3.5em;
    }

    .footer .navbar-nav {
        margin-bottom: 0.5em;
        width: auto;
    }

    .footer .nav-item {
        padding: 0;
        margin-top: 0.5em;
    }

    /* Team  */
    .team, .projects, .contact {
        height: 15em;
        background-size: cover;
        background-position: right;
    }

    .projects{
        background-position: top;
    }

    .other-headers h1 {
        font-size: 2em;
        padding: 2em 0;
        margin-bottom: 0;
    }

    .team-intro {
        padding: 1em 0 0;
    }

    .team-member {
        padding:0;
    }

    .member-desiree{
        flex-direction: column-reverse;
    }
    
    .member-braam{
        flex-direction: column;
    }

    .desiree-info, .braam-info {
        padding: 1em;
    }

    .team-member .col-sm-12 {
        padding: 0;
    }

    .desiree {
        height: 25em;
        width: auto;
        right: 0;
        top: 0;
    max-width: 24em;
        margin: 0 auto;
    }

    .braam {
        height: 25em;
        width: auto;
        left: 0;
        top: 0;
    max-width: 24em;
        margin: 0 auto;
    }

    .member-info {
        height: auto;
        max-width: 24em;
        margin: 0 auto;
        /* border-radius: 1em; */
    }

    .member-info h2 {
        margin-bottom: 0.5em;
        font-size: 2em;
    }

    .braam-info {
        margin-bottom: 2em;
    }

    /* Projects  */
    .current-projects {
        padding: 1em 0;
    }

    .current-projects h2, .past-projects h2 {
        margin-bottom: 0.5em;
        font-size: 2em;
    }

    .project-area {
        flex-direction: column-reverse;
    }

    .project-area img {
        margin-bottom: 1em;
        max-width: 30em;
        margin: 0 auto 1em;
        display: flex;
    }

    .current-projects .col-sm-12 {
        padding: 0;
    }

    .current-projects hr {
        margin: 2em 0;
    }

    .past-projects {
        padding:1em 0 0;
        margin-bottom: 2em;
    }

    .past-projects .col-sm-12{
        padding: 0 1em!important;
    }

    .projects-page h3 {
        font-size: 1.5em;
    }

    /* Contact  */
    .contact-info {
        padding: 2em 0;
    }

    .contact-form {
        padding-bottom: 2em;
    }

    .form-control {
        padding: 10px 15px;
        font-size: 18px;
    }

    .mobile-spacing {
        margin: 0 auto;
    }

}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px){
    .navbar-toggler {
        padding: .25rem .75rem;
        font-size: 1.5em;
        color: #fff;
    }

    header {
        padding: 0.5em 0;
        position: fixed;
        background: #277032;
        height: 4.7em;
    }

    .navbar-brand {
        padding:0;
        margin-right: 0;
        width: 9em;
        padding-left: 0.5em;
    }

    .navbar-nav {
        padding: 20px;
        width: auto;
        float: right;
        background-color: #277032;
        text-align: center;
    }

    .mobi-nopad{
        padding:0;
    }

    .other-headers{
        height: 20em;
    }

    .other-headers h1 {
        padding: 2em;
    }

    .navbar-expand-lg .navbar-collapse {
        position: absolute;
        right: 0;
        top: 2.9em;
    }

    .navbar-expand-lg .navbar-collapse .nav-link {
        padding: 0 0.5em!important;
        margin: 0.4em 0.5em 0!important;
    }

    .footer .navbar-nav {
        margin: 0 auto 1em;
        flex-direction: row;
        float: none;
        background-color: transparent;
        width: 28em;
    }

    .head-gallery img {
        width: 9em;
    }

    .head-box {
        height: 25em;
        padding-top: 5em;
    }

    .head-gallery {
        bottom: 0;
        padding: 3em 0;
    }

    .head-bottom {
        /* background-size: contain; */
        padding: 2em 0;
        height: auto;
        bottom: 2em;
    }

    .home-head {
        height: 30em;
    }

    .head-bottom p {
        margin-bottom: 2em;
    }

    .meet-team {
        padding: 0;
    }

    .fa-ul>li {
        line-height: 2;
    }

    .team-image, .project-image {
        height: 22em;
    }

    .meet-box {
        position: relative;
        right: 0;
        top: 0;
        transform: none;
    }
  
    .project-box {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
    }

    .meet-box, .project-box {
        padding: 2em 1em 2.8em;
        width: auto;
        height: 22em;
    }

    .our-projects {
        padding-bottom: 4em;
    }

    .meet-box h3 {
        font-size: 1.5em;
    }

    .our-services {
        padding: 0 0 2em;
    }

    .team-intro {
        padding: 2em 4em;
    }

    /* Team  */
    .member-info {
        height: auto;
    }

    .member-desiree{
        flex-direction: column-reverse;
    }
    
    .member-braam{
        flex-direction: column;
    }

    .member-image {
        height: 35em;
        position: relative;
        width: 30em;
        background-size: contain;
        right: 0;
        left: 0;
        top: 0;
    }

    .member-info {
        padding: 2em;
    }

    .team-member .col-sm-12 {
        padding: 0;
    }

    .team-member {
        padding: 0;
    }

    .braam-info {
        margin-bottom: 2em;
    }

    .current-projects {
        padding: 3em 0;
    }

    .current-projects hr {
        margin: 2em 0;
    }

    .past-projects {
        padding: 2em 0;
    }



    .contact-info {
        padding: 2em 0;
    }

    .contact-form {
        padding-bottom: 5em;
    }

    .footer {
        background-size: contain;
        padding-bottom: 6em;
    }

    .form-control {
        padding: 10px 15px;
        font-size: 18px;
    }

    .foot-logo {
        width: 8em;
    }

    .footer .nav-item {
        padding: 0 7px;
    }
    
}

@media (min-width: 992px) and (max-width: 1199px){
    .navbar-brand {
        width: 80%;
    }

    .head-gallery img {
        width: 13em;
    }

    .our-services {
        padding: 3em 0 1em;
    }

    .meet-team {
        padding: 2em 0;
    }

    .team-image, .project-image {
        height: 24em;
    }

    .meet-box, .project-box {
        padding: 2em 2em 3em;
        width: 25em;
    }

    .fa-ul>li {
        line-height: 2;
        font-size: 1em;
    }

    .meet-box {
        right: -6em;
    }

    .project-box {
        left: -6em;
    }

    .our-projects {
        padding-bottom: 5em;
    }

    .footer {
        background-size: contain;
        padding-bottom: 7em;
    }

    .foot-logo {
        width: 10em;
    }

    .home-head {
        height: 30em;
    }

    .head-box {
        height: 35em;
    }

    .other-headers {
        height: 25em;
    }

    .member-image {
        height: 30em;
        width: 22em;
    }

    .member-info h2 {
        margin-bottom: 0.5em;
    }

    .desiree-info {
        padding: 2em 8em 2em 2em;
    }

    .braam-info {
        padding: 2em 2em 2em 8em;
        margin-bottom: 0em;
    }

    .braam {
        left: 1em;
    }

    .member-info{
        height: auto;
    }

    .team-member {
        padding: 0 0 3em;
    }

    .current-projects {
        padding: 3em 0;
    }

    .past-projects {
        padding: 3em 2em;
    }

    .current-projects hr {
        margin: 2em 0;
    }

    .contact-form {
        padding-bottom: 5em;
    }

    .contact-info {
        padding: 5em 0 2em;
    }

    .head-bottom {
        height: 40em;
        bottom: 3em;
    }

}

/* Laptop: */
@media (min-width: 1199px) and (max-width: 1600px){
    .our-services {
        padding: 4em 0 2em;
    }

    .meet-team {
        padding: 6em 0;
    }

    .footer {
        background-size: contain;
        padding-bottom: 9em;
    }
    

}