/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    html {
        font-size: 50%;
    }

    .open-menu ~ nav {
        padding: 20px 0;
    }

    .navigation .logo-top {
        padding: 20px 0 0 8px;
    }

        .navigation .logo-top a {
            background: url("../img/logo.png") no-repeat;
            -webkit-background-size: 130px auto;
            -moz-background-size: 130px auto;
            -o-background-size: 130px auto;
            background-size: 130px auto;
            width: 130px;
            height: 135px;
            display: block;
            text-indent: -3000em;
            overflow: hidden;
        }

    nav li a {
        padding: 3px;
    }

    .hero-content {
        padding-top: 60px;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

        .hero-content h1 {
            font-size: 2em;
        }

    .about-us .left-area {
        margin-top: -25px;
    }

    .buttons-container .button {
        font-size: 2rem;
        display: block;
        margin: 0 auto 10px;
    }

    /*our focused areas*/
    .list-boxes p, .left-part p, .right-part p {
        text-align: justify;
        padding: 0px;
        font-size: 1.8rem;
        line-height: normal;
    }

    .left-part, .right-part {
        padding-left: 0px;
        padding-right: 0px;
    }

    .list-boxes ul {
        padding: 0px;
    }

    P, .list-boxes li {
        font-size: 1.7rem;
    }

        p.highlight {
            text-align: center !important;
            font-size: 2.1rem;
        }

    .div-transparent-white, .div-transparent-orange {
        padding-top: 0px;
    }

    div.upload label, div.upload span.file-name {
        font-size: 1.4rem;
        padding: 0;
        padding-top: 22px;
        text-align: center;
    }

        div.upload label i.cv-form-icon {
            background: none;
        }

    p.file-info {
        font-size: 1.4rem;
    }

    .div-transparent-white, .div-transparent-orange {
        height: 120%;
    }

    .benefits h3 {
        font-size: 2.6rem;
    }

    .benefits p {
        font-size: 1.6rem;
    }

    .advantages {
        padding: 0 30px;
    }
    /*buttons*/
    .button {
        font-size: 2rem;
    }

    .buttons-container .button {
        display: block;
        margin: 0 auto 10px;
    }
    /*job search*/
    ul.search-results li .search-results-hd p.location i {
        line-height: 1.6;
    }

    #job-description {
        border-right: none;
        padding-right: 0px;
        margin-bottom: 20px;
    }

        #job-description p, #job-description li {
            text-align: justify;
        }

    .widget {
        padding: 30px 0 30px 0px;
        border-top: 1px solid #000;
    }

    #job-details .widget .position h3 {
        font-size: 2.3rem;
        color: #fb6707;
    }

    .widget .meta {
        font-size: 2rem;
    }

    #iam-a-professional .panel-default > .panel-heading + .panel-collapse > .panel-body {
        background: #000;
    }

    ul.search-results li .search-results-bd .job-details {
        padding: 0px 30px 15px;
    }

    #job-search .page-header, #job-description .page-header {
        margin-top: 0px;
    }

    footer .main-footer .footer-small-text, footer .main-footer .details, footer .footer-bottom .right a {
        font-size: 14px;
    }

    footer .main-footer .footer-small-text {
        margin-top: 20px;
    }

    .jumbo-nav nav ul.social {
        padding: 10px 0px 10px;
    }

    .jumbo-nav {
        padding: 30px;
    }
    .header-social {
        display:none;
    }
    
    
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    .navigation .logo-top {
        padding: 20px 0 0 8px;
    }

    .hero-content h1 {
        font-size: 2.6em;
    }

    .hero-content {
        padding-top: 60px;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-us .left-area {
        margin-top: 0px;
    }
    /*our focused areas*/
    .list-boxes p, .left-part p, .right-part p {
        text-align: justify;
    }

    .left-part, .right-part {
        padding-left: 0px;
        padding-right: 0px;
    }

    p.highlight {
        text-align: center !important;
    }
    .buttons-container .button {
       
        margin: 0 10px 10px;
    }
     
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {    

    .navigation .logo-top {
        padding: 20px 0 0 8px;
    }

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    p {
        font-size: 1.6rem;
    }

    .hero-content h1 {
        font-size: 50px;
        padding-bottom: 60px;
    }

    .homepage p.sub-title-text {
        text-align: center;
    }

    p.sub-title-text {
        /*font-size: 30px;*/
        text-align: justify;
    }

    .hero-content .scrollTo .scrollMarket {
        font-size: 16px;
    }

    .about-us .left-area {
        margin-top: 0px;
    }

    .about-us .right-area {
        margin-top: -10%;
    }

    .focused-area .sub-makert-hover {
        min-height: 60px;
    }
    /*our focused areas*/
    .list-boxes p {
        text-align: justify;
    }

    .list-boxes.left-part, .list-boxes.right-part {
        padding-left: 20px;
        padding-right: 20px;
    }

    .list-boxes ul {
        padding: 0 15px 0 15px;
    }

    .button {
        height: 49px;
        padding: 18px 28px;
        letter-spacing: 3px;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .hero-content {
        padding-top: 100px;
        width: 60%;
    }

    .buttons-container .button {
        font-size: 1.3rem;
        display: inline;
        margin: 0 auto 10px;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .left-part, .right-part {
        padding-left: 35px;
        padding-right: 35px;
    }

    .hero-content {
        padding-top: 100px;
        width: 90%;
    }

    .benefits {
        padding: 0 15px;
    }

        .benefits h3 {
            font-size: 2rem;
        }

        .benefits p {
            font-size: 1.4rem;
        }

    #about-us .carousel-control.right {
        right: 50px;
    }

    #about-us .carousel-control.left {
        left: 0px;
    }

    .advantages {
        padding: 0 30px;
    }

    .buttons-container .button {
        font-size: 1.3rem;
        display: inline;
        margin: 0 auto 10px;
    }
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {


    .list-boxes p em {
        font-size: 1.5rem;
    }
    /*p.sub-title-text {
        font-size: 25px;
    }*/
    .homepage.section1 h1, .about-us.section1 h1, .contact-us.section1 h1, .iam-an-employer.section1 h1, .iam-a-professional.section1 h1, .our-focused-technology-verticals.section1 h1 {
        font-size: 55px;
    }

    .hero-content h1 {
        font-size: 37px;
    }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3) {
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3) {
    .hero-content h1 {
        font-size: 2.7em;
    }
}

@media (max-width: 567px) {
      .list-boxes ol, .list-boxes ul {
        -moz-column-count: 1;
        -moz-column-gap: 0em;
        -webkit-column-count: 1;
        -webkit-column-gap: 0em;
        column-count: 1;
        column-gap: 0em;
    }
    
}
@media (min-width: 568px) {
      .list-boxes ol, .list-boxes ul {
        -moz-column-count: 2;
        -moz-column-gap: 0em;
        -webkit-column-count: 2;
        -webkit-column-gap: 0em;
        column-count: 2;
        column-gap: 0em;
    }
    
}

@media (min-width: 768px) {
    .navigation .logo-top {
        padding: 32px 0 0 15px;
    }

        .navigation .logo-top a {
            width: 200px;
            height: 254px;
            -webkit-background-size: 200px 254px;
            -moz-background-size: 200px 254px;
            -o-background-size: 200px 254px;
            background-size: 200px 254px;
        }

    footer .main-footer .logo-footer {
        padding: 32px 0 10px 0px;
    }

    footer .main-footer {
        padding-left: 45px;
        padding-right: 45px;
    }

        footer .main-footer .logo-footer a {
            width: 141px;
            height: 49px;
            -webkit-background-size: 141px 49px;
            -moz-background-size: 141px 49px;
            -o-background-size: 141px 49px;
            background-size: 141px 49px;
        }

        footer .main-footer ul {
            margin-top: 15px;
            text-align: right;
        }

        footer .main-footer .footer-small-text {
            text-align: left;
            margin-bottom: -20px;
        }

    footer .footer-bottom {
        text-align: right;
    }

        footer .footer-bottom .right a {
            padding: 17px 20px;
        }
}

@media (min-width: 992px) {
    .hero-content {
        width: 650px;
    }

    .navigation .logo-top {
       padding: 20px 0 0 20px;
    }

    footer .main-footer .logo-footer {
        padding: 15px 0 10px 0px;
    }
}


@media (min-width: 1170px) {
   
}

@media (min-width: 1400px) {

    /*.list-boxes ol, .list-boxes ul {
        -moz-column-count: 2;
        -moz-column-gap: 0em;
        -webkit-column-count: 2;
        -webkit-column-gap: 0em;
        column-count: 2;
        column-gap: 0em;
    }*/
}
/*.map-canvas {
    width: 100%;
    padding-top: 65%;
    float: left;
}*/

@media screen and (max-width: 1199px) {
    div.locations .location-row .contact-details h2 {
        font-size: 2.0rem;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    div.locations .location-row .contact-details p, div.locations .location-row .contact-details ul li, section.locations .location-row .contact-details ul li a {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 991px) {
    div.locations .location-row .contact-details p, div.locations .location-row .contact-details ul li, section.locations .location-row .contact-details ul li a {
        font-size: 1.3rem;
    }

    .map-canvas {
        width: 100%;
        padding-top: 68%;
        float: left;
    }
}

@media screen and (max-width: 767px) {   
    .mt-30p {
    margin-top: 0%;
}
    /*slide-out button*/

    .slide-out-div {       
        width: 260px;
        background: rgba(255, 255, 255, 0.95);
        padding: 0 15px 10px;
    }

        .slide-out-div ul {
            margin-left: 15px;
        }

    /*locations*/

    .push {
        float: left!important;
    }

    .pull {
        float: right!important;
    }

    div.locations .location-row .contact-details {
        width: 100%;
        padding: 40px 20px;
    }

    div.locations .location-row .cform {
        width: 100%;
    }

    .contact-form.gap {
        height: 0px;
        padding: 0px;
    }

    div.locations .location-row .contact-details ul {
        margin-bottom: 20px;
    }

    div.locations .location-row .contact-details .mt-30 {
        margin-top: 0px;
    }

    .contact-form {
        padding: 50px 20px;
    }

    #job-details .widget ul.job-listings li.job-listing a {
        padding: 1rem 1rem 2rem 1rem;
    }

    div.locations .location-row .contact-details p, div.locations .location-row .contact-details ul li, section.locations .location-row .contact-details ul li a {
        font-size: 1.6rem;
    }
    /*images*/
    .homepage.intro, .homepage.why-we-different, .why-we-different .inner, .homepage.our-focused-industry-domains, .homepage.our-focused-industry-domains .inner, .homepage.our-focused-technology-verticals, .homepage.about-us, .homepage.what-we-offer,
    .our-focused-technology-verticals.cloud, .our-focused-technology-verticals.infrastructure, .our-focused-technology-verticals.digital, .our-focused-technology-verticals.software, .our-focused-technology-verticals.bi-data-analytics, .our-focused-technology-verticals.testing,
    .iam-an-employer.intro, .iam-an-employer.permanent-hire, .iam-an-employer.contract-or-interim, .iam-an-employer.recruitment-process-outsourcing, .iam-a-professional.intro, .contact-us.intro, .why-we-are-different.intro,
    .about-us.intro, .about-us.skillrecruit-journey, .about-us.our-staff {
        width: 100%;
        background-size: 100% !important;
        background-repeat: no-repeat;
        background-position: top center;
         background-attachment: fixed;
    }

    .homepage.intro {
        background-image: url(../img/homepage/homepageH600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .homepage.why-we-different {
        background-image: url(../img/homepage/homepage-slide2H600-bg.jpg);
    }

    .why-we-different .inner {
        background-image: url(../img/homepage/homepage-slide2H600.jpg);
    }

    .homepage.our-focused-industry-domains {
        background-image: url(../img/homepage/homepage-slide6H600.jpg);
    }

    .homepage.our-focused-technology-verticals {
        background-image: url(../img/homepage/homepage-slide3H600.jpg);
    }

    .homepage.about-us {
        padding-bottom: 100px;
        background-image: url(../img/homepage/homepage-slide4H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .homepage.what-we-offer {
        background-image: url(../img/homepage/homepage-slide5H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
        /*padding-top: 50px;*/
    }

    .our-focused-technology-verticals.cloud {
        background-image: url(../img/ourfocusedareas/bg1H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .our-focused-technology-verticals.infrastructure {
        background-image: url(../img/ourfocusedareas/bg2H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .our-focused-technology-verticals.digital {
        background-image: url(../img/ourfocusedareas/bg3H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .our-focused-technology-verticals.software {
        background-image: url(../img/ourfocusedareas/bg4H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .our-focused-technology-verticals.bi-data-analytics {
        background-image: url(../img/ourfocusedareas/bg5H600.jpg);
        background-position: bottom center;
        background-attachment: fixed;
    }

    .our-focused-technology-verticals.testing {
        background-image: url(../img/ourfocusedareas/bg6H600.jpg);
    }

    .about-us.intro {
        background-image: url(../img/aboutus/bg1H600.jpg);
        background-position-y: 62px;
    }

    .iam-an-employer.intro {
        background-image: url(../img/recruitmentservices/emp-bg1H600.jpg);
    }

    .iam-an-employer.permanent-hire {
        background-image: url(../img/recruitmentservices/emp-bg2H600.jpg);
    }

    .iam-an-employer.contract-or-interim {
        background-image: url(../img/recruitmentservices/emp-bg3H600.jpg);
    }

    .iam-an-employer.recruitment-process-outsourcing {
        background-image: url(../img/recruitmentservices/emp-bg4H600.jpg);
    }

    .iam-a-professional.intro {
        background-image: url(../img/recruitmentservices/prof-bg1H600.jpg);
    }

    .contact-us.intro {
        background-image: url(../img/contactus/bg1H600.jpg);
        background-position-y:bottom;
    }

    .why-we-are-different.intro {
        background-image: url(../img/whywearedifferent/bg1H600.jpg);
         background-position-y: 20px;
    }
}