@media only screen and (min-width: 1600px) and (max-width: 1920px) {

    body {
        font-size: 0.85em;
    }

    p {
        font-size: 1.1em;
    }
    .image-responsive.b{
        width: 7%;
    }

}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {

    .fixed-width { width: 85% }
    #about{
        text-align: justify;
    }

    .title h4 {
        width: 90%;
    }

    .services ul li {
        padding: 8%;
    }

    header.side-pic .content h4 {
        font-size: 3.4em;
    }

    header .content h2,
    header .content .explore {
        font-size: 0.72em;
    }

    header .content h4 {
        width: 60%;
        font-size: 3.5em;
    }
    .image-responsive.b{
        width: 7%;
    }

}

@media only screen and (min-width: 769px) and (max-width: 1023px) {

    .fixed-width { width: 85% }

    h1 { font-size: 1.2em }

    header .top-bar nav.desktop ul li {
        margin: 8px 0 0 20px;
        font-size: 0.8em;
    }

    .services ul li {
        padding: 4%;
    }

    .hire-me .form {
        width: 60%;
    }

    header.side-pic .content h4 {
        font-size: 3.4em;
    }

    header.side-pic .content .explore {
        font-size: 0.8em;
    }

    header .content h2,
    header .content .explore {
        font-size: 0.72em;
    }

    header .content h4 {
        width: 60%;
        font-size: 3em;
    }
    .image-responsive.b{
        width: 7%;
    }

}

@media only screen and (min-width: 769px) and (max-width: 1023px) and (max-height: 599px) {

    header.side-pic .content h2 {
        font-size: 0.7em;
    }

    header.side-pic .content h4 {
        font-size: 2.2em;
    }

    header.side-pic .content .explore {
        font-size: 0.75em;
    }

    header.side-pic .content .right > div img {
        max-width: 150%;
    }
    .image-responsive.b{
        width: 7%;
    }

}

/* ************************************* */
/* Tablet */
/* ************************************* */
@media only screen and (min-width: 569px) and (max-width: 768px) {

    header.side-pic .content .right > div img {
        max-width: 100%;
        height: auto;
    }

    .fixed-width { width: 80% }

    h1 { font-size: 1.2em }

    .services ul li {
        padding: 4%;
    }

    .hire-me .form {
        width: 65%;
    }

    .testimonials .comments p.comment {
        width: 65%;
        margin: auto;
    }

    /* Side Pic */
    header.side-pic {
        height: auto;
    }

    header.side-pic .content {
        position: relative;
        transform: translateY(0);
        flex-direction: column;
        padding: 0;
        margin-top: 100px;
    }

    header.side-pic .content .left h2::after {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    header.side-pic .content > div {
        width: 100%;
        text-align: center;
    }

    header.side-pic .content .right {
        text-align: center;
    }

    header.side-pic .content .right > div {
        display: none;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    header .content h2,
    header .content .explore {
        font-size: 0.72em;
    }

    .container-image .middle:hover {
        opacity: 0.7;
        width: 93%;
        font-weight: 700;
        position: absolute;
    }
}

/* ************************************* */
/* Phone */
/* ************************************* */
@media only screen and (min-width: 320px) and (max-width: 568px) {

    header.side-pic .content .right > div img {
        max-width: 100%;
        height: auto;
    }

    .fixed-width { width: 85% }
    .margin-bottom { margin-bottom: 100px }

    header .bottom,
    header nav.desktop,
    .hide-nav nav.desktop {
        display: none;
    }

    .hamburger,
    .hide-nav .hamburger {
        display: block;
    }

    h1 { font-size: 1.2em }
    h2 { font-size: 0.8em }
    h3 { font-size: 0.9em }
    h4 { font-size: 2.6em; line-height: 1.4em }
    h5 { font-size: 1.7em }

    p {
        line-height: 2.2em;
        font-size: 0.9em;
    }

    header { height: auto; }

    header a { text-decoration: none; color: inherit }

    header .content {
        position: relative;
        top: 0;
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }

    header.background {
        height: 100vh;
        background-attachment: scroll;
    }

    header.background .content {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    header .content h2,
    header .content .explore {
        font-size: 0.72em;
    }

    header .content h4 {
        margin: auto;
        width: 100%;
    }

    /* Side Pic */
    header.side-pic {
        height: auto;
    }

    header.side-pic .content {
        position: relative;
        transform: translateY(0);
        flex-direction: column;
        padding: 0;
        margin-top: 100px;
    }

    header.side-pic .content .left h2::after {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    header.side-pic .content > div {
        width: 100%;
        text-align: center;
    }

    header.side-pic .content .right {
        text-align: center;
    }

    header.side-pic .content .right > div {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    .title h4 {
        width: 100%;
    }

    .services ul li {
        width: 100%;
        padding: 8%;
    }

    .statistics {
        padding: 2em 0 2em 0;
    }

    .statistics ul li .number {
        line-height: 1.4em;
    }

    .statistics ul li {
        width: 100%;
        padding: 3em 0 3em 0;
    }

    .about p,
    .about p.one-column,
    .about p.two-columns,
    .about p.three-columns {
        margin-top: 50px;
        -webkit-column-count: 1;
           -moz-column-count: 1;
                column-count: 1;
        text-align: center;
    }
    #about{
        text-align: unset;
    }

    .testimonials {
        margin-bottom: 190px;
    }

    .hire-me .form {
        width: 90%;
    }

    footer {
        padding: 2em 0 2em 0;
    }

    footer > div {
        flex-direction: column;
        flex-wrap: wrap;
    }

    footer > div .left,
    footer > div .right {
        width: 100%;
        text-align: center;
    }

    footer > div .left ul li:first-child {
        display: block;
        margin: 0;

    }

    footer > div .left ul li:first-child p {
        margin: auto;
        text-align: center;
    }

    footer > div .left ul li:not(:first-child) {
        margin: 25px 18px 50px 18px;
    }

    .container-image .middle:hover {
        opacity: 0.7;
        width: 93%;
        font-weight: 700;
        position: absolute;
    }
    .image-responsive.b{
        width: 20%;
    }

}

@media only screen and (max-width: 568px) and (orientation: landscape) {

    header { height: auto }

    header .bottom { display: none }

    header .content {
        position: relative;
        transform: translateY(0);
        padding: 12em 0 12em 0;
    }

}