html {
    height: 100%;
}

body {
    font-family: 'Open Sans Condensed', sans-serif;
    height: 86%;
}

h2 {
    font-size: 2rem;
    line-height: 1.35;
    letter-spacing: -.08rem;
}

.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -3%;
}

.page-wrap:after {
    content: "";
    display: block;
}

.hero-photo {
    width: 80%;
    border: 0.01em solid #939598;
    margin-top: 8.5%;
    margin-left: 9.5%;
    margin-right: 9.5%;
    margin-bottom: 7.5%;
}

.service-1 {
    margin-top: 15%;
    padding-left: 37%;
}

.service-2 {
    margin-bottom: 0%;
    padding-left: 37%;
}

.service-name {
    color: #231f20;
    margin-bottom: 0;
}

.service-descp {
    color: #939598;
    margin-bottom: 0;
}

.logo {
    max-width: 2rem;
    margin-bottom: -0.2rem;
}

#name-surname {
    color: #939598;
    font-size: 2rem;
    margin-bottom: 0.5%;
    text-align: center;
}

.contact-details {
    margin-bottom: 0%;
    text-align: center;
}

.site-footer,
.page-wrap:after {
    /* .push must be the same height as footer */
    height: 3%;
}

.site-footer {}


/* Media Queries
––––––––––– */


/* Larger than mobile */

@media (min-width: 400px) {
    body {
        height: 96%;
    }
    .hero-photo {
        margin-left: 10%;
        margin-top: 11.5%;
        margin-bottom: 10.5%;
    }
    .service-1,
    .service-2 {
        padding-left: 38%;
    }
    .service-2 {
        margin-bottom: 0%;
    }
    #name-surname {
        text-align: left;
    }
    .contact-details {
        text-align: left;
        line-height: 1.9;
    }
    .logo-name {
        display: inline;
        width: 46%;
    }
    #name-surname {
        text-align: left;
    }
    .contact-details-1 {
        width: 31%;
    }
    .contact-details-2 {
        width: 22%;
    }
}


/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {
    body {
        height: 97%;
    }
    .three.columns {
        width: 100%;
    }
    .three.columns.service-1 {
        margin-top: 5%;
    }
    .six.columns {
        width: 100%;
        margin-left: 0;
    }
    .hero-photo {
        margin-left: 10%;
        margin-top: 4.5%;
        margin-bottom: 3.5%;
    }
    .three.columns.logo-name {
        width: 46%;
        padding-left: 10%;
    }
    .three.columns.contact-details-1,
    .three.columns.contact-details-2 {
        width: 22%;
    }
    .service-2 {
        margin-bottom: 4%;
        margin-left: 0;
    }
    .contact-details {
        line-height: 1.8;
    }
}


/* Larger than tablet */

@media (min-width: 750px) {
    body {
        height: 98%;
    }
    .three.columns.service-1 {
        margin-top: 8%;
        margin-left: 3%;
    }
    .three.columns.service-2 {
        margin-left: 3%;
    }
    .service-1,
    .service-2 {
        padding-left: 40%;
    }
    .hero-photo {
        margin-top: 4.5%;
        margin-bottom: 3.5%;
    }
    .three.columns.logo-name {
        padding-left: 11%;
    }
    /* Larger than desktop */
    @media (min-width: 1000px) {
        body {
            height: 98.5%;
        }
        .three.columns.service-1 {
            width: 18%;
            padding-left: 0%;
            margin-top: 30%;
            text-align: right;
        }
        .six.columns {
            margin-left: 7%;
            width: 48%;
        }
        .hero-photo {
            margin: 34% 0 0;
            width: 100%;
        }
        .three.columns.service-2 {
            width: 18%;
            padding-left: 7%;
            margin-top: 30%;
            margin-left: 0;
            margin-bottom: 0;
        }
        .three.columns.logo-name {
            width: 48%;
            padding-left: 30%;
        }
        .three.columns.contact-details-1 {
            width: 11%;
            margin-left: 2%;
        }
    }
    /* Larger than Desktop HD */
    @media (min-width: 1200px) {
        body {
            height: 99.5%
        }
        .three.columns.service-1 {
            margin-top: 27%;
            width: 18%;
            margin-left: 0;
        }
        .six.columns {
            margin-left: 7.5%;
        }
        .hero-photo {
            margin-top: 24%;
        }
        .three.columns.service-2 {
            margin-top: 27%;
            width: 18%;
            padding-left: 7.5%;
        }
        .three.columns.logo-name {
            padding-left: 28%;
            width: 46%;
        }
    }