/*Handling devices - scaling*/


/* ----------- iPhone 4 and 4S ----------- */

@media (max-device-width: 320px) {}

@media (max-device-width: 360px) {}

@media (max-device-width: 568px) {

    .navbar.navbar-default {
        padding-right: 0;
        padding-left: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .navbar-active {
        background: rgba(0, 0, 0, 0.6) !important;
    }

    .navbar-brand {
        top: 5px;
    }

    .carousel-inner ul {
        padding: 0 30px;
    }

    .carousel-inner ul.right {
        left: 0;
    }

    .caption-title h1 {
        font-size: 1.8em;
    }

    .caption-desc {
        font-size: 1.0em;
    }

    ol.carousel-indicators {
        padding-left: 50px;
    }

    .section-mega {
        font-size: 2.5em;
        font-weight: 700;
        margin-bottom: 10px;
        width: 100%;
    }

    .section-subheading{
        font-size: 1.5em;
        font-weight: 600;
        width: 100%;
    }

    .centered {
        bottom: -5px;
    }

    .header-desc {
        font-size: 0.8em;
        padding: 0 150px 30px 150px;
    }


    #our-process {
        margin-right: 0;
        padding-right: 20px;
        padding-top: 50px;
    }

    #our-process .p-l-50 {
        padding-left: 0;
    }

    #our-process .aside-left-sm {
        left: 0;
        bottom: -35px
    }

    #our-process .section-mega {
        text-align: center;
    }

    #our-process p {
        margin: 1em; /* -top: 60px; */
        font-size: 1.0em;
        line-height: 24px;
    }

    #our-process .bordered-box {
        margin-top: 50px;
        background-size: 270px auto;
        height: 300px;
        margin-bottom: 0;
    }


    #our-services p {
        font-size: 1.0em;
        margin-top: 40px;
    }

    #our-services p.first-child {
        padding-left: 30px;
        padding-right: 30px;
    }

    #our-services .mg-l-50 {
        margin-left: 30px;
    }

    #our-services ul {
        margin-left: 40px;
        margin-top: 0;
        padding-top: 0;
    }

    #our-services ul li {
        font-size: 1.0em;
        letter-spacing: 0.06em;
    }

    #our-services .img-box {
        background: url("../images/services/service.png") center no-repeat;
        background-size: contain;
        width: auto;
        height: 350px;
        margin-top: 40px;
    }


    #portfolio .section-subheading{
        bottom: -35px;
    }

    #portfolio .carousel {
        margin-top: 30px;
        padding-right: 0;
        padding-left: 0;
    }

    #portfolio .carousel-indicators {
        top: 530px;
        left: 40%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }


    #contacts .header-desc {
        font-size: 1.0em;
        margin-left: 30px;
        margin-right: 30px;
        padding-top: 10px;
    }

    .form-parent {
        padding-left: 60px;
        padding-right: 60px;
        height: 580px;
    }

}

@media (max-device-width: 667px) {}

@media (max-device-width: 736px) {
    .header-desc {
        padding: 20px 0 40px 0;
    }

    p {
        font-size: 1.0em;
    }

    /*Naviation menu*/
    #nav-responsive ul {
        position: relative;
        left: -50%;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
        -o-transform: translateX(50%);
    }

    /*Home section*/
    #home {
        height: 70vh;
    }

    #home-pager .carousel-inner .item img {
        height: 80vh;
    }

    .carousel-title-container {
        padding: 5px 10px 5px 10px !important;
        font-size: 1.6em;
    }

    .carousel-desc-container {
        padding: 10px 15px 10px 15px !important;
        font-size: 1.2em;
    }

    ol.carousel-indicators {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    ol.carousel-indicators li,
    ol.carousel-indicators li.active {
        position: relative;
        left: 25%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }

    /*About us section*/
    #about-us{
        padding-bottom: 30px !important;
    }

    .about-us-card{
        margin-left: 10px;
        padding-left: 0 !important;
        width: 300px;
        padding: 15px;

        min-height: 300px;
    }

    .about-us-card .mission {
        margin-top: 1.2em;
    }

    .about-us-card img{
        height: 400px;
        width: auto;
    }

    /*Our process*/
    #our-process .header-desc {
        padding: 20px 0 0 0;
        font-size: 1.0em;
    }

    /*Our service*/
    #our-services {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 50px !important;
    }

    #our-services .row {
        margin-bottom: 0 !important;
    }

    #our-services .section-header {
        margin-bottom: 30px;
    }

    #our-services .service-desc {
        font-size: 1.0em;
    }

    /*Our portfolio*/
    #portfolio{
        height:auto;
        position: relative;
        background: #FFFFFF center;
        background-size: cover;
        padding-bottom: 70px !important;
    }

    #portfolio .header-desc {
        font-size: 1.0em;
    }

    /*Section - Contacts*/
    #contacts{
        padding: 60px 15px 0 15px;
    }

    #contact-us-form input[type="text"],
    #contact-us-form input[type="email"],
    #contact-us-form textarea {
        padding: 0 !important;
        font-size: 0.85em;
    }

    #contact-us-form input[type="text"],
    #contact-us-form input[type="email"] {
        height: 30px;
    }

    #contact-us-form textarea {
        height: 150px !important;
        max-height: 50px;
    }

    .form-group.is-focused .form-control{
        background-image: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    }

    .form-control, .form-group .form-control{
        background-image: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    }

    #contact-us-form input[type="text"]:focus, #contact-us-form input[type="email"]:focus, #contact-us-form textarea:focus {
        box-shadow: none;
    }

    #submit.btn-default {
        background: transparent;
        color: white;
        margin-right: -1.0em !important;
    }

    #contacts .social {
        margin-top: 1em;
        padding-left: 0;
        width: auto;
    }

    /*Section - Map*/
    #google-map{
        height:350px;
        width: 100%;
        padding: 0;
    }

    #map{
        height:100%;
        width: 100%;
    }

    #content {
        width: 500px !important;
    }

    #content .lock-img{
        height: 140px;
        width: 150px;
    }

    #locationInfo {
        margin: 0;
        padding: 0;
    }

    #locationInfo h3{
        margin-top: 0;
        font-size: 1.1em;
        font-weight: bolder;
    }

    #locationInfo p .title{
        margin: 8px 0;
        font-weight: bolder;
    }

    #locationInfo p{
        font-weight: 400;
    }

}