@media only screen and (min-width : 900px) and (max-width : 1200px) {

    @font-face {
        font-family: Trueno;
        src: url("../fonts/Trueno/TruenoRg.otf");
      }

    /* only-mobile */

    .only-mobile {
        display: none;
    }

    /* header */

    #header-inner {
        width: 90%;
        margin: 0 auto;
    }

    header h1 {
        width: 5em;
        float: left;
        padding-top: 1em;
    }

    header h1 a {
        display: inline-block;
    }

    header h1 a img {
        width: 100%;
    }

    /* menu */

    nav {
        height: 7em;
        position: relative;
    }

    nav ul {
        display: inline-block;
        width: 100%;
        text-align: center;
        height: 7em;
    }

    nav ul li {
        display: inline-block;
        width: 15%;
        text-align: center;
        margin-top: 4.5em;
        padding-bottom: 1.2em;
    }

    nav .menu_hover {
        background: transparent url('../images/menu_underline.png') no-repeat bottom center;
        background-size: 100% 50%;
        padding-bottom: 1.3em;
        position: absolute;
        left : -100%;
        top: 82%;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    nav ul li a {
        font-size: 0.8em;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    nav ul li:hover a {
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    /* wrapper */

    #wrapper {
        padding-top: 7em;
    }

    /* subhead */

    .subhead {
        height: 3.8em;
        line-height: 3.8em;
        background-size: 8%;
        background-image: linear-gradient(-90deg, #e7e3df, #e7e3df, #A9D3FF, #96C5F7, #6C759B);

    }

    .subhead h2 {
        padding-left: 10%;
        font-size: 2.2em;
        background-image: linear-gradient(-90deg, #e7e3df, #e7e3df, #A9D3FF, #96C5F7, #6C759B);
    }

    /* landing */

    #landing img {
        display: none;
    }

    #landing .demo {
        width: 100%;
        display: block;
    }

    #hello {
        background-image: url('../images/landing.jpg');
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-size: 100%;
        height: 24em;
    }

    /* inner content */

    .inner-content {
        margin: 0 auto;
        padding: 2.8em 8%;
        position: relative;
        display: block;
    }

    /* about us */

    #about-us .above {
        position: relative;
    }

    #about-us .above h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        color: #5c939f;
        font-size: 2.7em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.7em;
        width: 40%;
    }

    #about-us .below h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        color: #5c939f;
        font-size: 2.7em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.7em;
        width: 90%;
    }

    #about-us .above h3 {
        float: left;
    }

    #about-us .above #counter {
        position: absolute;
        left: 10%;
        top: 23%;
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2.4em;
        width: 6.5em;
        line-height: 6.3em;
        text-align: center;
    }

    @-webkit-keyframes rotating-m {
        from{
            -webkit-transform: rotate(0deg);
        }
        to{
            -webkit-transform: rotate(360deg);
        }
    }

    #about-us .above .minute {
        -webkit-animation: rotating-m 3600s linear infinite;
        background: transparent url('../images/minute.png') no-repeat top left;
        width: 15.4em;
        height: 15.4em;
        background-size: 100%;
        position: absolute;
        left: 10%;
        top: 23%;
    }

    @-webkit-keyframes rotating-s {
        from{
            -webkit-transform: rotate(0deg);
        }
        to{
            -webkit-transform: rotate(360deg);
        }
    }

    #about-us .above .second {
        -webkit-animation: rotating-s 60s linear infinite;
        background: transparent url('../images/second.png') no-repeat top left;
        width: 15.4em;
        height: 15.4em;
        background-size: 100%;
        position: absolute;
        left: 10%;
        top: 23%;
    }

    #about-us .above p {
        float: right;
        width: 52.1%;
        font-family: 'Trueno', sans-serif;
        font-weight: 400;
        font-size: 1.1em;
        line-height: 1.8em;
        color: #6d6d6d;
    }

    #about-us .below {
        background: #e7e3df url('../images/grid.png') no-repeat 50% 35%;
        background-size: 80%;
    }

    #about-us .btn {
        padding: 1em 2.8em 1em 1em;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        float: right;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 1em;
    }

    #skills {
        padding-top: 2em;
        margin-bottom: 4em;
    }

    #skills .skill-point {
        width: 33.3%;
        height: 15em;
        float: left;
        text-align: center;
    }

    #skills .skill-point p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.9em;
        line-height: 1.8em;
        color: #6d6d6d;
        padding-top: 8em;
        width: 88%;
        margin: 0 auto;
    }

    #agency {
        background: transparent url('../images/agency_icon.png') no-repeat top center;
    }

    #quality {
        background: transparent url('../images/quality_icon.png') no-repeat top center;
    }

    #human {
        background: transparent url('../images/human_icon.png') no-repeat top center;
    }

    #long {
        background: transparent url('../images/long_icon.png') no-repeat top center;
    }

    #help {
        background: transparent url('../images/help_icon.png') no-repeat top center;
    }

    #weight {
        background: transparent url('../images/weight_icon.png') no-repeat top center;
    }

    /* references */

    #references {
        position: relative;
        z-index: 5;
    }

    #references #slide-left {
        background: transparent url('../images/arrow_left.png') no-repeat top left;
        position: absolute;
        top: 11%;
        left: 0;
        width: 3.4em;
        height: 10em;
        cursor: pointer;
        z-index: 5;
    }

    #references .above {
        background-image: url('../images/reference-above.jpg');
        background-repeat: no-repeat;
        background-color: #fff;
    }

    #references .below {
        background-color: #f6f6f6;
    }

    #references .below h4 {
        text-align: center;
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        font-size: 1.4em;
        color: #5c939f;
        background-image: url('../images/companies-bg.png');
        background-repeat: no-repeat;
        background-position: 50% 92%;
        padding-top: 2em;
    }

    #references .below .content {
        width: 100%;
        margin: 0 auto;
        background-color: #f6f6f6;
        background-size: 99%;
        padding: 2em 0;
    }

    #references .below .company {
        float: left;
        width: 25%;
        padding-top: 11em;
        cursor: pointer;
    }

    #ps { background: transparent url('../images/companies/ps.png') no-repeat center; }
    #lauritzen { background: transparent url('../images/companies/lauritzen.png') no-repeat center; }
    #sca { background: transparent url('../images/companies/sca.png') no-repeat center; }
    #msd { background: transparent url('../images/companies/msd.png') no-repeat center; }
    #flow { background: transparent url('../images/companies/flow.png') no-repeat center; }
    #viva { background: transparent url('../images/companies/viva.png') no-repeat center; }
    #viacom { background: transparent url('../images/companies/viacom.png') no-repeat center; }
    #tkom { background: transparent url('../images/companies/telekom.png') no-repeat center; }
    #sodexo { background: transparent url('../images/companies/sodexo.png') no-repeat center; }
    #rose { background: transparent url('../images/companies/drrose.png') no-repeat center; }
    #mars { background: transparent url('../images/companies/mars.png') no-repeat center; }
    #twix { background: transparent url('../images/companies/twix.png') no-repeat center; }
    #cola { background: transparent url('../images/companies/cola.png') no-repeat center; }
    #pedigree { background: transparent url('../images/companies/pedigree.png') no-repeat center; }
    #whiskas { background: transparent url('../images/companies/whiskas.png') no-repeat center; }

    #slider {
        position: relative;
    }

    #slider-inner {
        position: relative;
        margin: 0 auto;
        width: 70%;
        padding-top: 1em;
    }

    #slider-inner h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2.5em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.6em;
    }

    #slider-inner .inner-content {
        margin: 0 auto;
        padding: 0;
        position: relative;
        display: none;
    }

    #references .reference-text {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 3em;
    }

    #references .reference-text h4 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 2em;
        color: #5e5e5d;
    }

    #references .reference-text p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 1.1em;
        line-height: 1.5em;
        color: #6d6d6d;
    }

    #references .reference-text p span {
        font-family: 'Trueno', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 0.9em;
        color: #5e5e5d;
        text-transform: uppercase;
        background:r transparent url('../images/reference_text_line.png') no-repeat bottom left;
        background-size: initial;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        display: block;
    }

    #references #imac-ref {
        display: none;
    }

    #references .reference-canvas {
        width: 100%;
        position: relative;
        height: 15em;
    }

    #references .reference-canvas img {
        width: 100%;
        float: left;
        margin-top: 3%;
    }

    #references .reference-canvas img + img {
        margin-top: -60%;
        width: 43%;
        float: right;
    }

    #references .reference-canvas a {
        background: transparent url('../images/launch_btn.png') no-repeat top left;
        background-size: initial;
        font-family: 'Trueno', sans-serif;
        font-weight: 500;
        font-size: 1em;
        text-transform: uppercase;
        color: #fff;
        width: 5em;
        height: 4em;
        padding-top: 1.8em;
        text-align: center;
        position: absolute;
        margin: 0;
        top: 28em !important;
        left: 2em;
        /* float: right; */
    }

    #references .btn {
        font-size: 1em;
        padding: 1.2em 3.5em 1.2em 2em;
        margin-top: 1.5em;
        display: block;
        background: transparent url('../images/btn_search.png') no-repeat 85% 50%;
        width: 20%;
    }

    #references #slide-right {
        background: transparent url('../images/arrow_right.png') no-repeat top right;
        position: absolute;
        top: 11%;
        right: 0;
        width: 3.4em;
        height: 10em;
        cursor: pointer;
        z-index: 5;
    }

    /* our team */

    #our-team .content {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /*
    #our-team .content .member {
        float: left;
        width: 33.33%;
        padding-top: 33.33%;
        cursor: pointer;
        background-size: cover;
        position: relative;
    }

    #our-team .content .member .info {
        display: none;
        width: 100%;
        height: 60%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        background-color: rgba(28, 66, 74, 0.75);
        padding-top: 40%;
    }

    #our-team .content .member .info p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        font-size: 21px;
        color: #ee6254;
        padding-bottom: 10px;
    }

    #our-team .content .member .info p span {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 21px;
        color: #fff;
    }

    #our-team .content .member:hover .info {
        display: block;
    }

    #one { background-image: url('../images/members/guy1.png'); }
    #two { background-image: url('../images/members/guy2.png'); }
    #three { background-image: url('../images/members/guy3.png'); }
    #four { background-image: url('../images/members/guy4.png'); }
    #five { background-image: url('../images/members/girl1.png'); }
    #six { background-image: url('../images/members/girl2.png'); }
    */

    #join {
        float: left;
        width: 100%;
        background-color: rgba(47, 103, 116, 0.9);
    }

    #join .hire-left,
    #join .hire-right {
        float: left;
        padding-top: 1em;
        padding-bottom: 1em;
        width: 40%;
        margin-right: 2.5%;
    }

    /*
    #join h5 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 30px;
        font-weight: 600;
        color: #ee6254;
        margin: 1.5% 0 0 5.5%;
    }
    */

    #join p span {
        color: #ee6254;
        font-size: 1.6em;
    }

    #join p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 1em;
        line-height: 1.8em;
        font-weight: 300;
        color: #fff;
        width: 100%;
        margin: 1% 0 0 0;
        padding-left: 25%;
    }

    /*
    #join a {
        padding: 20px 80px 20px 32px;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 18px;
        color: #89c2ce;
        margin: 5.5% 5.5% 5.5% 0;
    }
    */

    /* get in touch */

    #get-in-touch .content {
        position: relative;
        height: 25em;
        overflow: hidden;
    }

    #get-in-touch .left-wrapper {
        width: 100%;
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../images/map.jpg');
        background-size: 150%;
        background-position: 30% 45%;
        background-repeat: no-repeat;
        height: 26em;
        padding: 0;
    }

    #get-in-touch .left-wrapper #marker {
        position: absolute;
        bottom: 52%;
        left: 39%;
    }

    #get-in-touch .right-wrapper {
        width: 25%;
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 2.4%;
        padding-top: 2em;
        height: 25em;
        background-color: rgba(47, 103, 116, 0.9);
    }

    #get-in-touch .right-wrapper h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 2em;
        color: #89c2ce;
        margin-bottom: 1em;
    }

    #get-in-touch .right-wrapper p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 1em;
        color: #fff;
        line-height: 1.8em;
    }

    #get-in-touch .right-wrapper p span {
        color: #89c2cd;
    }

    #get-in-touch .right-wrapper p a {
        text-decoration: underline;
        color: #e66253;
        font-weight: 500;
    }

    footer {
        width: 100%;
        background-color: #052a32;
    }

    #footer-inner {
        width: 80%;
        margin: 0 auto;
        padding: 5em 0;
        text-align: center;
    }

    #footer-inner p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 200;
        font-size: 1em;
        line-height: 1.6em;
        color: #5a939e;
        display: inline-block;
        width: 25%;
        margin: 0 3.9%;
    }

}

@media only screen and (min-width : 722px) and (max-width : 1190px) {

    /* only-mobile */

    .only-mobile {
        display: none;
    }

    /* header */

    #header-inner {
        width: 90%;
        margin: 0 auto;
    }

    header h1 {
        width: 5em;
        float: left;
        padding-top: 1em;
    }

    header h1 a {
    	display: inline-block;
    }

    header h1 a img {
    	width: 100%;
    }

    /* menu */

    nav {
        height: 7em;
        position: relative;
    }

    nav ul {
        display: inline-block;
        width: 100%;
        text-align: center;
        height: 7em;
    }

    nav ul li {
        display: inline-block;
        width: 13%;
        text-align: center;
        margin-top: 4.5em;
        padding-bottom: 1.2em;
    }

    nav .menu_hover {
        background: transparent url('../images/menu_underline.png') no-repeat bottom center;
        background-size: 100% 50%;
        padding-bottom: 1.3em;
        position: absolute;
        left : -100%;
        top: 82%;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    nav ul li a {
        font-size: 1.1em;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    nav ul li:hover a {
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    /* wrapper */

    #wrapper {
        padding-top: 7em;
    }

    /* subhead */

    .subhead {
/*         height: 3.8em;
 */        line-height: 3.8em;
        background-size: 8%;
    }

    .subhead h2 {
        padding-left: 10%;
        font-size: 2.2em;
        background-image: linear-gradient(-90deg, #e7e3df, #e7e3df, #A9D3FF, #96C5F7, #6C759B);
    }

    /* landing */

    #landing img {
        display: none;
    }

    #landing .demo {
        width: 100%;
        display: block;
    }

    #hello {
        background-image: url('../images/landing.jpg');
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100%;
        height: 26em;
    }

    /* inner content */

    .inner-content {
        margin: 0 auto;
        padding: 2.8em 8%;
        position: relative;
        display: block;
    }

    /* about us */

    #about-us .above {
        position: relative;
    }

    #about-us .above h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        color: #5c939f;
        font-size: 2.7em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.7em;
        width: 40%;
    }

    #about-us .below h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        color: #5c939f;
        font-size: 2.7em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.7em;
        width: 90%;
    }

    #about-us .above h3 {
        float: left;
    }

    #about-us .above #counter {
        position: absolute;
        left: 10%;
        top: 23%;
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2.4em;
        width: 6.5em;
        line-height: 6.3em;
        text-align: center;
    }

    @-webkit-keyframes rotating-m {
        from{
            -webkit-transform: rotate(0deg);
        }
        to{
            -webkit-transform: rotate(360deg);
        }
    }

    #about-us .above .minute {
        -webkit-animation: rotating-m 3600s linear infinite;
        background: transparent url('../images/minute.png') no-repeat top left;
        width: 15.4em;
        height: 15.4em;
        background-size: 100%;
        position: absolute;
        left: 10%;
        top: 23%;
    }

    @-webkit-keyframes rotating-s {
        from{
            -webkit-transform: rotate(0deg);
        }
        to{
            -webkit-transform: rotate(360deg);
        }
    }

    #about-us .above .second {
        -webkit-animation: rotating-s 60s linear infinite;
        background: transparent url('../images/second.png') no-repeat top left;
        width: 15.4em;
        height: 15.4em;
        background-size: 100%;
        position: absolute;
        left: 10%;
        top: 23%;
    }

    #about-us .above p {
        float: right;
        width: 52.1%;
        font-family: 'Trueno', sans-serif;
        font-weight: 400;
        font-size: 1.1em;
        line-height: 1.8em;
        color: #6d6d6d;
    }

    #about-us .below {
        background: #e7e3df url('../images/grid.png') no-repeat 50% 35%;
        background-size: 80%;
    }

    #about-us .btn {
        padding: 1em 2.8em 1em 1em;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        float: right;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 1em;
    }

    #skills {
        padding-top: 2em;
        margin-bottom: 4em;
    }

    #skills .skill-point {
        width: 33.3%;
        height: 15em;
        float: left;
        text-align: center;
    }

    #skills .skill-point p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.9em;
        line-height: 1.8em;
        color: #6d6d6d;
        padding-top: 8em;
        width: 88%;
        margin: 0 auto;
    }

    #agency {
        background: transparent url('../images/agency_icon.png') no-repeat top center;
    }

    #quality {
        background: transparent url('../images/quality_icon.png') no-repeat top center;
    }

    #human {
        background: transparent url('../images/human_icon.png') no-repeat top center;
    }

    #long {
        background: transparent url('../images/long_icon.png') no-repeat top center;
    }

    #help {
        background: transparent url('../images/help_icon.png') no-repeat top center;
    }

    #weight {
        background: transparent url('../images/weight_icon.png') no-repeat top center;
    }

    /* references */

    #references {
        position: relative;
        z-index: 5;
    }

    #references #slide-left {
        background: transparent url('../images/arrow_left.png') no-repeat top left;
        position: absolute;
        top: 11%;
        left: 0;
        width: 3.4em;
        height: 10em;
        cursor: pointer;
        z-index: 5;
    }

    #references .above {
        background-image: url('../images/reference-above.jpg');
        background-repeat: no-repeat;
        background-color: #fff;
    }

    #references .below {
        background-color: #f6f6f6;
    }

    #references .below h4 {
        text-align: center;
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        font-size: 1.4em;
        color: #5c939f;
        background-image: url('../images/companies-bg.png');
        background-repeat: no-repeat;
        background-position: 50% 92%;
        padding-top: 2em;
    }

    #references .below .content {
        width: 100%;
        margin: 0 auto;
        background-color: #f6f6f6;
        background-size: 99%;
        padding: 2em 0;
    }

    #references .below .company {
        float: left;
        width: 25%;
        padding-top: 11em;
        cursor: pointer;
    }

    #ps { background: transparent url('../images/companies/ps.png') no-repeat center; }
    #lauritzen { background: transparent url('../images/companies/lauritzen.png') no-repeat center; }
    #sca { background: transparent url('../images/companies/sca.png') no-repeat center; }
    #msd { background: transparent url('../images/companies/msd.png') no-repeat center; }
    #flow { background: transparent url('../images/companies/flow.png') no-repeat center; }
    #viva { background: transparent url('../images/companies/viva.png') no-repeat center; }
    #viacom { background: transparent url('../images/companies/viacom.png') no-repeat center; }
    #tkom { background: transparent url('../images/companies/telekom.png') no-repeat center; }
    #sodexo { background: transparent url('../images/companies/sodexo.png') no-repeat center; }
    #rose { background: transparent url('../images/companies/drrose.png') no-repeat center; }
    #mars { background: transparent url('../images/companies/mars.png') no-repeat center; }
    #twix { background: transparent url('../images/companies/twix.png') no-repeat center; }
    #cola { background: transparent url('../images/companies/cola.png') no-repeat center; }
    #pedigree { background: transparent url('../images/companies/pedigree.png') no-repeat center; }
    #whiskas { background: transparent url('../images/companies/whiskas.png') no-repeat center; }

    #slider {
        position: relative;
    }

    #slider-inner {
        position: relative;
        margin: 0 auto;
        width: 70%;
        padding-top: 1em;
    }

    #slider-inner h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2.5em;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 0.6em;
    }

    #slider-inner .inner-content {
        margin: 0 auto;
        padding: 0;
        position: relative;
        display: none;
    }

    #references .reference-text {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 3em;
    }

    #references .reference-text h4 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 2em;
        color: #5e5e5d;
    }

    #references .reference-text p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 1.1em;
        line-height: 1.5em;
        color: #6d6d6d;
    }

    #references .reference-text p span {
        font-family: 'Trueno', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 0.9em;
        color: #5e5e5d;
        text-transform: uppercase;
        background:r transparent url('../images/reference_text_line.png') no-repeat bottom left;
        background-size: initial;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        display: block;
    }

    #references #imac-ref {
        display: none;
    }

    #references .reference-canvas {
        width: 100%;
        position: relative;
        height: 15em;
    }

    #references .reference-canvas img {
        width: 100%;
        float: left;
        margin-top: 3%;
    }

    #references .reference-canvas img + img {
        margin-top: -60%;
        width: 43%;
        float: right;
    }

    #references .reference-canvas a {
        background: transparent url('../images/launch_btn.png') no-repeat top left;
        background-size: initial;
        font-family: 'Trueno', sans-serif;
        font-weight: 500;
        font-size: 1em;
        text-transform: uppercase;
        color: #fff;
        width: 5em;
        height: 4em;
        padding-top: 1.8em;
        text-align: center;
        position: absolute;
        margin: 0;
        top: 28em !important;
        left: 2em;
        /* float: right; */
    }

    #references .btn {
        font-size: 1em;
        padding: 1.2em 3.5em 1.2em 2em;
        margin-top: 1.5em;
        display: block;
        background: transparent url('../images/btn_search.png') no-repeat 85% 50%;
        width: 20%;
    }

    #references #slide-right {
        background: transparent url('../images/arrow_right.png') no-repeat top right;
        position: absolute;
        top: 11%;
        right: 0;
        width: 3.4em;
        height: 10em;
        cursor: pointer;
        z-index: 5;
    }

    /* our team */

    #our-team .content {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /*
    #our-team .content .member {
        float: left;
        width: 33.33%;
        padding-top: 33.33%;
        cursor: pointer;
        background-size: cover;
        position: relative;
    }

    #our-team .content .member .info {
        display: none;
        width: 100%;
        height: 60%;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        background-color: rgba(28, 66, 74, 0.75);
        padding-top: 40%;
    }

    #our-team .content .member .info p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        font-size: 21px;
        color: #ee6254;
        padding-bottom: 10px;
    }

    #our-team .content .member .info p span {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 21px;
        color: #fff;
    }

    #our-team .content .member:hover .info {
        display: block;
    }

    #one { background-image: url('../images/members/guy1.png'); }
    #two { background-image: url('../images/members/guy2.png'); }
    #three { background-image: url('../images/members/guy3.png'); }
    #four { background-image: url('../images/members/guy4.png'); }
    #five { background-image: url('../images/members/girl1.png'); }
    #six { background-image: url('../images/members/girl2.png'); }
    */

    #join {
        float: left;
        width: 100%;
        background-color: rgba(47, 103, 116, 0.9);
    }

    #join .hire-left,
    #join .hire-right {
        float: left;
        padding-top: 1em;
        padding-bottom: 1em;
        width: 40%;
        margin-right: 2.5%;
    }

    /*
    #join h5 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 30px;
        font-weight: 600;
        color: #ee6254;
        margin: 1.5% 0 0 5.5%;
    }
    */

    #join p span {
        color: #ee6254;
        font-size: 1.6em;
    }

    #join p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 1em;
        line-height: 1.8em;
        font-weight: 300;
        color: #fff;
        width: 100%;
        margin: 1% 0 0 0;
        padding-left: 25%;
    }

    /*
    #join a {
        padding: 20px 80px 20px 32px;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 18px;
        color: #89c2ce;
        margin: 5.5% 5.5% 5.5% 0;
    }
    */

    /* get in touch */

    #get-in-touch .content {
        position: relative;
        height: 25em;
        overflow: hidden;
    }

    #get-in-touch .left-wrapper {
        width: 100%;
        float: left;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../images/map.jpg');
        background-size: 150%;
        background-position: 30% 45%;
        background-repeat: no-repeat;
        height: 26em;
        padding: 0;
    }

    #get-in-touch .left-wrapper #marker {
        position: absolute;
        bottom: 52%;
        left: 39%;
    }

    #get-in-touch .right-wrapper {
        width: 25%;
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 2.4%;
        padding-top: 2em;
        height: 25em;
        background-color: rgba(47, 103, 116, 0.9);
    }

    #get-in-touch .right-wrapper h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 2em;
        color: #89c2ce;
        margin-bottom: 1em;
    }

    #get-in-touch .right-wrapper p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 1em;
        color: #fff;
        line-height: 1.8em;
    }

    #get-in-touch .right-wrapper p span {
        color: #89c2cd;
    }

    #get-in-touch .right-wrapper p a {
        text-decoration: underline;
        color: #e66253;
        font-weight: 500;
    }

    footer {
        width: 100%;
        background-color: #052a32;
    }

    #footer-inner {
        width: 80%;
        margin: 0 auto;
        padding: 5em 0;
        text-align: center;
    }

    #footer-inner p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 200;
        font-size: 1em;
        line-height: 1.6em;
        color: #5a939e;
        display: inline-block;
        width: 25%;
        margin: 0 3.9%;
    }

}

@media only screen and (min-width : 690px) and (max-width : 1000px) {

    #about-us .below {
        background: #e7e3df url('../images/grid_tablet.png') no-repeat 50% 45%;
        background-size: 85%;
    }

}