@media screen and (min-width: 1191px) {

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

    /* only-mobile */

    .only-mobile {
        display: none;
    }

    /* header */

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

    header h1 {
        padding: 1.4% 0 0 0;
        float: left;
        margin-right: 2%;
    }

    header h1 a {
    	width: 160px;
    	display: inline-block;
    }

    header h1 a img {
    	width: 100%;
    }

    /* menu */

    nav {
        overflow: hidden;
        position: relative;
    }

    nav ul {
        display: inline-block;
        width: 100%;
    }

    nav ul li {
        display: inline-block;
        width: 11%;
        text-align: center;
        margin-top: 90px;
        padding-bottom: 20px;
    }

    nav .menu_hover {
        background: transparent url('../images/menu_underline.png') no-repeat bottom center;
        background-size: 100% 50%;
        padding-bottom: 20px;
        position: absolute;
        left : -100%;
        top: 112px;
        width: 100px;
        -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.active {
        color: #fff;
    }

    nav ul li a {
        font-size: 18px;
        -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;
    }

    /* subhead */

    .subhead {
        height: 90px;
        line-height: 90px;
    }

    .subhead h2 {
        padding-left: 115px;
        font-size: 46px;
    }

    /* landing */

    #landing img {
        width: 100%;
        display: block;
    }

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

    #hello {
        display: none;
    }

    /* inner content */

    .inner-content {
        width: 940px;
        margin: 0 auto;
        padding: 20px 7.5% 40px;
        position: relative;
        display: block;
    }

    /* about us */

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

    .above h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 46px;
        background: transparent url('../images/dot.jpg') no-repeat left center;
        padding-left: 22px;
        width: 300px;
    }

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

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

    #about-us .above #counter {
        position: absolute;
        left: 12%;
        top: 23%;
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 40px;
        width: 300px;
        height: 300px;
        line-height: 300px;
        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: 300px;
        height: 300px;
        position: absolute;
        left: 12%;
        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: 300px;
        height: 300px;
        position: absolute;
        left: 12%;
        top: 23%;
    }

    #about-us .above p {
        float: right;
        width: 52.1%;
        font-family: 'Trueno', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        color: #6d6d6d;
        margin-top: 10px;
    }

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

    #about-us .btn-container {
        text-align: center;
        padding: 30px 0 20px;
        display: block;
    }

    #about-us .btn {
        font-size: 18px;
        padding: 20px 56px 20px 32px;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
    }

    #skills {
        padding-top: 30px;
        margin-bottom: 20px;
    }

    #skills .skill-point {
        width: 310px;
        height: 280px;
        float: left;
        text-align: center;
    }

    #skills .skill-point p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 16px;
        line-height: 28px;
        color: #6d6d6d;
        padding-top: 130px;
        width: 260px;
        margin: 0 auto;
    }

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

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

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

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

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

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

    /* references */

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

    #references .above {
        height: 685px;
        background-image: url('../images/reference-above.jpg');
    }

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

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

    #references .below .content {
        width: 985px;
        margin: 0 auto;
        background: #f6f6f6 url('../images/companybg.png') no-repeat 50% 50%;
        background-size: 96%;
        padding: 50px 0;
    }

    #references .below .company {
        float: left;
        width: 197px;
        height: 196px;
    }

    #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; }

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

    #slider {
        position: relative;
    }

    #slider-inner {
        position: relative;
        margin: 0 auto;
        width: 960px;
        padding-top: 20px;
    }

    #slider-inner h3 {
        float: left;
    }

    #slider-inner .inner-content {
        display: none;
        width: 940px;
        height: 800px;
        margin: 0 auto;
        padding: 20px 0 40px;
        position: relative;
    }

    #references .reference-text {
        width: 340px;
        height: 355px;
        float: right;
    }

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

    #references .reference-text p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 16px;
        line-height: 26px;
        color: #6d6d6d;
        margin: 10px 0;
    }

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

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

    #references .reference-canvas {
        position: relative;
    }

    #references .reference-canvas img {
        position: absolute;
        right: 45%;
        margin-top: 32%;
    }

    #references .reference-canvas img + img {
        margin-top: 55%;
        right: 39%;
    }

    #references .reference-canvas a {
        position: absolute;
        margin-top: 72%;
        left: 20px;
        color: #fff;
        background: transparent url('../images/launch_btn.png') no-repeat top left;
        background-size: initial;
        font-family: 'Trueno', sans-serif;
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
        color: #fff;
        width: 78px;
        height: 60px;
        padding-top: 30px;
        text-align: center;
    }

    #references .btn {
        font-size: 18px;
        padding: 20px 56px 20px 32px;
        background: transparent url('../images/btn_search.png') no-repeat 85% 50%;
        float: left;
        margin-top: 40px;
    }

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

    /* our team */

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

    #our-team .content .member {
        float: left;
        width: 20%;
        padding-top: 20%;
        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;
        position: relative;
        width: 100%;
        /*
        background: transparent url('../images/team-bg.png') center;
        background-size: 13%;
        */
        background-color: rgba(47, 103, 116, 0.9);
        padding-bottom: 2%;
    }

    #join .hire-left,
    #join .hire-right {
        float: left;
        padding-top: 20px;
        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: 26px;
    }

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

    #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: 650px;
        overflow: hidden;
    }

    #get-in-touch .left-wrapper {
        width: 100%;
        float: left;
        background-image: url('../images/map.jpg');
        background-size: 100%;
        background-position: 50% 70%;
        padding-top: 45%;
        position: relative;
    }

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

    #get-in-touch .right-wrapper {
        width: 20%;
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        padding-left: 2.4%;
        padding-top: 32px;
        height: 640px;
        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: 30px;
        color: #89c2ce;
        margin-bottom: 30px;
    }

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

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

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

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

    #footer-inner {
        width: 80%;
        margin: 0 auto;
        padding: 90px 0;
    }

    #footer-inner p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 200;
        font-size: 18px;
        line-height: 28px;
        color: #5a939e;
        display: inline-block;
        width: 100%;
        text-align: center;
    }

}

@media screen and (max-width : 1500px) {

    header h1 {
        padding: 1.8% 0 0 0;
    }

    #get-in-touch .left-wrapper {
        padding-top: 55%;
        background-size: 120%;
        background-position: 44% 210%
    }

    #get-in-touch .left-wrapper #marker {
        bottom: 65%;
        left: 35.2%;
    }

}

@media screen and (max-width : 1280px) {

    #landing img {
        padding-top: 50px;
    }

    #references .reference-canvas img {
        margin-top: 25%;
    }

    #references .reference-canvas img + img {
        margin-top: 44%;
    }

    #references .reference-canvas a {
        margin-top: 60%;
    }

}