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

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

    body {
        font-size: 100%;
    }

    /* header */

    #header-inner {
        display: none;
    }

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

    header h1 {
        padding: 2%;
        float: left;
        width: 23.8%;
    }

    header h1 a {
        display: inline-block;
    }

    header h1 a img {
        width: 100%;
    }

    /* menu */

    #menubtn {
        float: right;
        width: 8%;
        padding: 6% 6% 0 0;
        cursor: pointer;
    }

    #menubtn img {
        width: 100%;
        opacity: 0.75;
        -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;
    }

    #menubtn img:hover {
        opacity: 1;
        -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;
    }

    #mobile-menu {
        /*display: none;*/
        width: 100%;
        height: 100%;
        position: fixed;
        top: 150%;
        left: 0;
        z-index: 10;
        background-image: url('../images/mobile-menu-bg.png');
        background-repeat: repeat;
    }

    #mobile-menu #close-btn {
        float: right;
        color: #fff;
        font-size: 3em;
        font-family: 'Trueno', sans-serif;
        padding: 1% 6.5% 0 0;
        z-index: 99;
        position: relative;
    }

    #mobile-menu nav {
        width: 100%;
        padding-top: 4em;
        z-index: 90;
    }

    #mobile-menu nav ul li {
        width: 100%;
        text-align: center;
        padding: 0.65em 0;
    }

    #mobile-menu nav ul li a {
        font-size: 2em;
    }

    /* wrapper */

    #wrapper {
        padding-top: 6em;
    }

    /* subhead */

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

    }

    .subhead h2 {
        padding-left: 2.8em;
        font-size: 1.3em;
        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% 50%;
        background-size: 100%;
        height: 20em;
    }

    /* inner content */

    .inner-content {
        margin: 0 auto;
        padding: 1em 4% 2em;
        position: relative;
        display: block;
    }

    /* about us */

    #about-us .inner-content {
        padding: 0.5em 4% 2em;
    }

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

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

    #about-us .above #counter {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2em;
        width: 50%;
        padding: 23% 0 25%;
        margin: 0 auto;
        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: 50%;
        padding: 27.3% 0;
        margin: 0 auto;
        background-size: 100%;
        position: absolute;
        left: 25%;
    }

    @-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: 50%;
        padding: 28% 0;
        margin: 0 auto;
        background-size: 100%;
        position: absolute;
        left: 25%;
        top: 4.5%;
    }

    #about-us .above p {
        width: 100%;
        font-family: 'Trueno', sans-serif;
        font-weight: 400;
        font-size: 0.85em;
        line-height: 1.8em;
        color: #6d6d6d;
        /*padding-top: 15em;*/
        padding-top: 1.5em;
    }

    #about-us .btn {
        font-size: 1.2em;
        background: transparent url('../images/btn_arrow.png') no-repeat 90% 50%;
        background-size: 8%;
        margin: 0 auto;
        width: 65%;
        display: block;
        padding: 0.5em 0 0.5em 1em;
    }

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

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

    #skills .skill-point p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.85em;
        line-height: 1.5em;
        color: #6d6d6d;
        padding-top: 12em;
        width: 90%;
        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 right;
        background-size: 100%;
        position: absolute;
        top: 10%;
        left: 0;
        width: 2em;
        height: 6em;
        cursor: pointer;
        z-index: 5;
    }

    #references .above {
        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: 1em;
        color: #5c939f;
        padding-top: 0.8em;
    }

    #references .below .content {
        width: 100%;
        margin: 0 auto;
        background-color: #f6f6f6;
    }

    #references .below .company {
        float: left;
        width: 40%;
        padding-top: 40%;
        margin: 0 5%;
        background-size: 100%;
    }

    #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;
        background-color: #f0f0f0;
    }

    #slider-inner {
        position: relative;
        width: 90%;
        margin: 0 auto;
        min-height: 32.5em;
    }

    #slider-inner h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 1.5em;
        background: transparent url('../images/dot.jpg') no-repeat 0% 70%;
        padding-left: 0.8em;
        padding-top: 0.5em;
    }

    #slider-inner .inner-content:last-child {
        display: none;
    }

    #references .inner-content {
        width: 80%;
        display: none;
    }

    #references img {
        width: 100%;
    }

    #references .reference-text {
        width: 100%;
        float: left;
    }

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

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

    #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;
        text-align: center;
    }

    #references .reference-canvas {
        display: none;
    }

    #references .btn {
        font-size: 1.5em;
        background: transparent url('../images/btn_search.png') no-repeat 90% 50%;
        background-size: 10%;
        margin: 0 auto;
        width: auto;
        display: block;
        padding: 0.5em 0 0.5em 1em;
    }

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

    /* our team */

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

    #our-team .content .member {
        float: left;
        width: 50%;
        padding-top: 50%;
        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);
        padding-bottom: 1em;
    }

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

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

    #join p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 0.8em;
        line-height: 1.8em;
        font-weight: 300;
        color: #fff;
        width: 80%;
        margin: 2% 0 0 5.5%;
    }

    #join a {
        padding: 1em 4em 1em 1.8em;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 1.1em;
        color: #89c2ce;
        margin: 5% auto;
        display: block;
        width: 50%;
    }

    /* get in touch */

    #get-in-touch .left-wrapper {
        width: 100%;
        background-image: url('../images/map.jpg');
        background-size: 180%;
        background-position: 30% 60%;
        background-repeat: no-repeat;
        height: 14em;
        padding: 0;
        position: relative;
    }

    #get-in-touch .right-wrapper {
        width: auto;
        background-color: rgb(47, 103, 116);
        padding-top: 1em;
        padding-left: 2em;
    }

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

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

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

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

    #get-in-touch #mailto {
        font-size: 0.8em;
        padding-bottom: 0.5em;
    }

    #get-in-touch .left-wrapper #marker {
        position: absolute;
        top: 26%;
        left: 41%;
        width: 8%;
    }

    #get-in-touch .left-wrapper #marker img {
        width: 100%;
    }

    .footer-inner-left,
    .footer-inner-right {
        float: left;
        width: 50%;
    }

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

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

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

}

@media only screen and (min-width : 320px) and (max-width : 600px) {

    body {
        font-size: 100%;
    }

    /* header */

    #header-inner {
        display: none;
    }

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

    header h1 {
        padding: 2%;
        float: left;
        width: 23.8%;
    }

    header h1 a {
        display: inline-block;
    }

    header h1 a img {
        width: 100%;
    }

    /* menu */

    #menubtn {
        float: right;
        width: 8%;
        padding: 6% 6% 0 0;
        cursor: pointer;
    }

    #menubtn img {
        width: 100%;
        opacity: 0.75;
        -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;
    }

    #menubtn img:hover {
        opacity: 1;
        -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;
    }

    #mobile-menu {
        /*display: none;*/
        width: 100%;
        height: 100%;
        position: fixed;
        top: 150%;
        left: 0;
        z-index: 10;
        background-image: url('../images/mobile-menu-bg.png');
        background-repeat: repeat;
    }

    #mobile-menu #close-btn {
        float: right;
        color: #fff;
        font-size: 3em;
        font-family: 'Trueno', sans-serif;
        padding: 1% 6.5% 0 0;
        z-index: 99;
        position: relative;
    }

    #mobile-menu nav {
        width: 100%;
        padding-top: 4em;
        z-index: 90;
    }

    #mobile-menu nav ul li {
        width: 100%;
        text-align: center;
        padding: 0.65em 0;
    }

    #mobile-menu nav ul li a {
        font-size: 2em;
    }

    /* wrapper */

    #wrapper {
        padding-top: 4em;
    }

    /* subhead */

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

    }

    .subhead h2 {
        padding-left: 2.3em;
        font-size: 1.3em;
        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% 50%;
        background-size: 100%;
        height: 10em;
    }

    /* inner content */

    .inner-content {
        margin: 0 auto;
        padding: 1em 4% 2em;
        position: relative;
        display: block;
    }

    /* about us */

    #about-us .inner-content {
        padding: 0.5em 4% 2em;
    }

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

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

    #about-us .above #counter {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 2em;
        width: 50%;
        padding: 20% 0;
        margin: 0 auto;
        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: 50%;
        padding: 27.3% 0;
        margin: 0 auto;
        background-size: 100%;
        position: absolute;
        left: 25%;
    }

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

    #about-us .above .second {
        -webkit-animation: rotating-s 10s linear infinite;
        background: transparent url('../images/second.png') no-repeat top left;
        width: 50%;
        padding: 28% 0;
        margin: 0 auto;
        background-size: 100%;
        position: absolute;
        left: 25%;
        top: 4.2%;
    }

    #about-us .above p {
        width: 100%;
        font-family: 'Trueno', sans-serif;
        font-weight: 400;
        font-size: 0.85em;
        line-height: 1.8em;
        color: #6d6d6d;
        /*padding-top: 15em;*/
        padding-top: 1.5em;
    }

    #about-us .btn {
        font-size: 1.2em;
        background: transparent url('../images/btn_arrow.png') no-repeat 90% 50%;
        background-size: 8%;
        margin: 0 auto;
        width: 65%;
        display: block;
        padding: 0.5em 0 0.5em 1em;
    }

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

    #skills .skill-point {
        width: 50%;
        height: 13em;
        float: left;
        text-align: center;
        background-size: 55%;
    }

    #skills .skill-point p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 0.7em;
        line-height: 1.5em;
        color: #6d6d6d;
        padding-top: 65%;
        width: 90%;
        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 right;
        background-size: 100%;
        position: absolute;
        top: 10%;
        left: 0;
        width: 1.4em;
        height: 6em;
        cursor: pointer;
        z-index: 5;
    }

    #references .above {
        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: 1em;
        color: #5c939f;
        padding-top: 0.8em;
    }

    #references .below .content {
        width: 100%;
        margin: 0 auto;
        background-color: #f6f6f6;
    }

    #references .below .company {
        float: left;
        width: 40%;
        padding-top: 40%;
        margin: 0 5%;
        background-size: 100%;
    }

    #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;
        background-color: #f0f0f0;
    }

    #slider-inner {
        position: relative;
        width: 90%;
        margin: 0 auto;
        min-height: 32.5em;
    }

    #slider-inner h3 {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-weight: 600;
        color: #5c939f;
        font-size: 1.5em;
        background: transparent url('../images/dot.jpg') no-repeat 0% 70%;
        padding-left: 0.8em;
        padding-top: 0.5em;
    }

    #slider-inner .inner-content:last-child {
        display: none;
    }

    #references .inner-content {
        width: 80%;
        display: none;
    }

    #references img {
        width: 100%;
    }

    #references .reference-text {
        width: 100%;
        float: left;
    }

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

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

    #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;
        text-align: center;
    }

    #references .reference-canvas {
        display: none;
    }

    #references .btn {
        font-size: 1.5em;
        background: transparent url('../images/btn_search.png') no-repeat 90% 50%;
        background-size: 10%;
        margin: 0 auto;
        width: auto;
        display: block;
        padding: 0.5em 0 0.5em 1em;
    }

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

    /* our team */

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

    #our-team .content .member {
        float: left;
        width: 50%;
        padding-top: 50%;
        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);
        padding-bottom: 1em;
    }

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

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

    #join p {
        font-family: 'Trueno', sans-serif;
        font-style: italic;
        font-size: 0.8em;
        line-height: 1.8em;
        font-weight: 300;
        color: #fff;
        width: 80%;
        margin: 2% 0 0 5.5%;
    }

    #join a {
        padding: 1em 4em 1em 1.8em;
        background: transparent url('../images/btn_arrow.png') no-repeat 85% 50%;
        font-family: 'Trueno', sans-serif;
        font-weight: 600;
        font-size: 1.1em;
        color: #89c2ce;
        margin: 5% auto;
        display: block;
        width: 50%;
    }

    /* get in touch */

    #get-in-touch .left-wrapper {
        width: 100%;
        background-image: url('../images/map.jpg');
        background-size: 180%;
        background-position: 30% 60%;
        background-repeat: no-repeat;
        height: 14em;
        padding: 0;
        position: relative;
    }

    #get-in-touch .right-wrapper {
        width: auto;
        background-color: rgb(47, 103, 116);
        padding-top: 1em;
        padding-left: 2em;
    }

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

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

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

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

    #get-in-touch #mailto {
        font-size: 0.8em;
        padding-bottom: 0.5em;
    }

    #get-in-touch .left-wrapper #marker {
        position: absolute;
        top: 26%;
        left: 41%;
        width: 8%;
    }

    #get-in-touch .left-wrapper #marker img {
        width: 100%;
    }

    .footer-inner-left,
    .footer-inner-right {
        float: left;
        width: 50%;
    }

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

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

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

}