/* large desktop :1400px. */

@media (min-width: 1400px) and (max-width: 2000px) {
    .slide-content {
        left: 135px;
    }
    .service-bg {
        background-size: auto auto;
    }
    .portfolio-content:hover .images-link {
        margin-left: 152px;
    }
    .portfolio-content:hover .image-view {
        margin-right: 152px;
    }
    .portfolio-content {
        padding-top: 120px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 140px;
    }
    .pricing-section {
        width: 100%;
    }
    .slide-content {
        left: 130px;
    }
}


/* desktop 1200px to 1399px */

@media (min-width: 1200px) and (max-width: 1399px) {
    .portfolio-content:hover .images-link {
        margin-left: 80px;
    }
    .portfolio-content:hover .image-view {
        margin-right: 80px;
    }
    .portfolio-content {
        padding-top: 50px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 70px;
    }
    .slide-content {
        left: 120px;
    }
}

@media (max-width: 880px) {
    .header-section {}
    div.portfolio-content:hover .images-link {
        margin-left: 112px;
    }
    div .portfolio-content:hover .image-view {
        margin-right: 112px;
    }
    .progress-bg {
        background-position: unset;
        background-size: auto auto;
    }
}


/* Normal desktop :992px. */

@media (min-width: 992px) and (max-width: 1169px) {
    .header-section {}
    div.hadding-area p {
        padding: 0 205px;
    }
    .slide-content {
        left: 160px;
    }
    div.portfolio-content {
        padding: 20px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 40px;
    }
    .portfolio-content:hover .portfolio-text {
        padding-top: 41px;
        line-height: 18px;
    }
    div.team-hover-item {
        height: 100%;
        padding: 0;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 70px;
        top: 100px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 69px;
        top: 100px;
    }
    .team-hover-item:hover .team-icon-2 {
        top: 100px;
    }
    .team-hover-item:hover .team-title {
        top: 34px;
    }
    .team-hover-item:hover .team-sub-title {
        top: 46px !important;
    }
    div.team-content .des {
        padding: 117px 19px 17px;
    }
    .our-team .hadding-area > p {
        padding: 0 154px!important;
    }
    .twite-section .des {
        padding: 0 167px!important;
    }
    .portfolio-content:hover .images-link {
        margin-left: 36px;
    }
    .portfolio-content:hover .image-view {
        margin-right: 37px;
    }
}

@media (max-width: 768px) {
    .header-section {}
    div.portfolio-content:hover .images-link {
        margin-left: 104px;
    }
    div .portfolio-content:hover .image-view {
        margin-right: 104px;
    }
}


/* Tablet desktop :768px. */

@media (min-width: 768px) and (max-width: 991px) {
    .header-section .support {
        padding: 20px 0 0 !important;
    }
    div.menu-section .nav.navbar-nav a {
        padding-left: 10px;
    }
    .search-hidden {
        top: 103px;
    }
    .search-form {
        position: relative;
        width: 315px;
    }
    .slide-content {
        left: 126px;
    }
    .slide-content > h2 {
        font-size: 27px;
        line-height: 33px;
    }
    .slide-content > p {
        padding-bottom: 30px;
        padding-top: 10px;
    }
    .hadding-area p {
        padding: 0 130px;
    }
    .our-team .hadding-area > p {
        padding: 0 94px;
    }
    .populer-content > h1 {
        font-size: 32px;
    }
    .service-items {
        background-color: rgba(38, 34, 35, 0.87);
        padding-left: 100px;
        padding-right: 121px;
        width: 100%;
    }
    .service-item {
        padding-left: 70px;
        padding-top: 50px;
    }
    .about-image {
        height: 300px;
        margin-top: 60px;
        width: 300px;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 98px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 98px;
    }
    .portfolio-content:hover .images-link {
        margin-left: 150px;
    }
    .portfolio-content:hover .image-view {
        margin-right: 151px;
    }
    .portfolio-content {
        padding: 97px 20px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 117px;
    }
    .twite-section .des {
        padding: 0;
    }
}


/* small mobile :320px. */

@media (max-width: 767px) {
    .menu-section .header-search {
        padding-bottom: 2px;
    }
    .header-section .logo {
        float: left;
        padding: 20px 0;
        position: absolute;
        display: block;
        z-index: 1;
    }
    .item-inner:first-child {
        margin-top: 0;
        padding: 0;
    }
    .header-section.on {
        min-height: 64px;
    }
    .menu-section .header-search {
        position: absolute;
        top: 20px;
    }
    .header-section .support {
        padding: 0;
        text-align: center;
        width: 100%;
    }
    .menu-section {
        float: none;
        text-align: center;
        width: 100%;
    }
    .search-form {
        position: relative;
        width: auto;
        margin-left: -77px;
    }
    div .nav.navbar-nav.pull-right {
        float: left !important;
        margin-left: 22px;
        margin-top: 57px;
        text-align: left;
    }
    .nav.navbar-nav > li > ul {
        left: 72px;
        top: -22px;
    }
    .search-hidden button {
        position: absolute;
        right: 26px;
    }
    .search-box {
        padding: 0 0 13px 19px;
    }
    .search-hidden button {
        right: 0;
    }
    .search-hidden {
        left: 0;
        right: 0;
        text-align: center;
        top: 83px;
    }
    .client-section {
        display: block;
    }
    .slide-content {
        left: 102px;
        max-width: 511px;
        top: 34%;
    }
    .header-section .navbar-default {
        border-color: transparent;
        left: -211px;
        min-height: 61px;
        min-width: 614px;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .navbar-collapse.collapse {
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        width: 100%;
        z-index: -1;
    }
    .slide-content > h2 {
        font-size: 21px;
        line-height: 28px;
    }
    .slide-content > p {
        padding-bottom: 26px;
    }
    .hadding-area p {
        padding: 0;
    }
    .service-items {
        width: 100%;
    }
    .about-image {
        height: 380px;
        width: 380px;
        margin-top: 60px;
    }
    .progress-item {
        padding: 17px 0;
    }
    .portfolio-list {
        text-align: center;
    }
    .portfolio-content:hover .images-link {
        margin-left: 34.5%;
    }
    .portfolio-content:hover .image-view {
        margin-right: 34.5%;
    }
    .portfolio-content {
        padding: 126px 20px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 146px;
    }
    .our-team .hadding-area > p {
        padding: 0;
    }
    .team-social-iton {
        margin: 0;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 143px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 143px;
    }
    .populer-content > h1 {
        font-size: 31px;
        padding: 53px 0;
    }
    .priceing-content {
        margin: 30px 0 0;
    }
    .blog-carousel .item-inner > img {
        width: 100%;
    }
    .blog-carousel .item-inner {
        margin: 30px;
    }
    .twite-section .des {
        padding: 0;
    }
    .twite-section {
        overflow: hidden;
    }
    .client-content img {
        width: auto !important;
    }
    .footer-copyright,
    .footer-social {
        float: none;
        text-align: center;
    }
}

@media (min-width:360px) and (max-width:640px) {
    .header-search {
        padding-bottom: 2px;
    }
    .logo img {
        width: 111px;
    }
    .search-hidden input {
        min-width: 85%;
        padding: 10px;
    }
    .search-hidden button {
        right: 24px;
    }
    .search-hidden {
        top: 64px;
        left: -40px!important;
        right: 39px!important;
    }
    .about-image {
        height: 300px;
        margin: 0 auto;
        width: 300px;
    }
    div.portfolio-content:hover .images-link {
        margin-left: 92px;
    }
    div .portfolio-content:hover .image-view {
        margin-right: 92px;
    }
    div .slide-content {
        left: 95px;
        top: 40%;
        width: 313px;
    }
    div .nivoSlider img {
        height: 300px !important;
    }
    .btn.btn-buttons {
        font-size: 11px;
        margin: 3px 1px;
        padding: 6px 9px;
    }
    .header-section .navbar-default {
        border-color: transparent;
        left: -211px;
        min-height: 61px;
        min-width: 614px;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .navbar-collapse.collapse {
        background-color: rgba(0, 0, 0, 0.5);
        left: -6px;
        position: absolute;
        top: -1px;
        width: 584px;
        z-index: -1;
    }
    .menu-section .navbar-collapse {
        overflow: hidden;
    }
    .nav.navbar-nav.pull-right {
        float: none !important;
        margin-left: 20px;
        margin-top: 71px;
    }
    .menu-section .nav.navbar-nav > li > a {
        padding: 22px 14px;
    }
    .nav.navbar-nav > li > ul {
        left: 65px;
        top: -11px;
    }
    .header-section .logo {
        padding: 19px 0;
        position: absolute;
    }
    .menu-section .header-search {
        padding-bottom: 2px;
        position: absolute;
        right: 113px;
        top: 20px;
    }
    .navbar-toggle,
    .navbar-toggle:focus {
        border-color: #be9342 !important;
        border-radius: 0;
        position: absolute;
        right: 164px;
        top: -10px;
    }
    .header-section.on {
        min-height: 65px;
    }
    .nav > li {
        margin-left: 48px;
        text-align: left;
    }
    .search-form {
        position: relative;
        width: 315px;
    }
    .search-hidden button {
        right: 0;
    }
    .slide-content > h2 {
        font-size: 13px;
        line-height: 15px;
    }
    .slide-content > p {
        font-size: 13px;
        padding-bottom: 5px;
        padding-top: 0px;
    }
    .slider-items .btn.btn-buttons {
        padding: 4px 5px;
    }
    .slider-items .btn.btn-buttons {
        font-size: 9px;
        padding: 6px 9px;
    }
    div .slide-content > p {
        font-size: 14px;
        padding-bottom: 11px;
        padding-top: 5px;
    }
    div .nivoSlider img {
        height: 300px !important;
    }
    .footer-copyright,
    .footer-social {
        float: none;
        text-align: center;
    }
}

@media only screen and (max-width:568px) {
    div.form-button {
        padding: 30px 15px 0;
    }
}

@media only screen and (max-width:568px) {
    div.portfolio-content:hover .images-link {
        margin-left: 110px;
    }
    div .portfolio-content:hover .image-view {
        margin-right: 110px;
    }
    div .team-hover-item:hover .team-icon-1 {
        left: 123px;
    }
    div .team-hover-item:hover .team-icon-3 {
        right: 122px;
    }
}

@media only screen and (max-width:375px) {
    div.portfolio-content:hover .images-link {
        margin-left: 91px!important;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 103px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 103px;
    }
    div .slide-content {
        left: 79px;
        top: 32%;
    }
    div .team-hover-item:hover .team-icon-1 {
        left: 103px;
    }
    div .team-hover-item:hover .team-icon-3 {
        right: 103px;
    }
}

@media only screen and (max-width:320px) {
    .menu-section .header-search {
        padding-bottom: 2px;
    }
    .logo img {
        width: 110px;
    }
    .search-hidden button {
        right: 0;
    }
    .slide-content {
        left: 13px;
    }
    .slide-content > h2 {
        font-size: 8px!important;
        line-height: 8px!important;
    }
    .slide-content > p {
        font-size: 12px!important;
        padding-bottom: 12px!important;
        padding-top: 6px!important;
    }
    .slide-content .btn.btn-buttons {
        font-size: 11px!important;
        padding: 10px 10px 6px !important;
    }
    div .nivoSlider img {
        height: 300px !important;
    }
    .form-button {
        padding: 15px 13px 0;
    }
    .footer-social > ul > li {
        margin: 0 18px;
    }
    .header-section .navbar-default {
        border-color: transparent;
        left: -115px;
        min-height: 61px;
        min-width: 322px;
        position: absolute;
        top: 0;
    }
    .navbar-toggle,
    .navbar-toggle:focus {
        border-color: #be9342 !important;
        border-radius: 0;
        position: absolute;
        top: 4px;
    }
    .menu-section .navbar-collapse {
        overflow: hidden;
    }
    .slider-items .nivo-prevNav::after {
        left: 6px;
        top: 3px;
    }
    .slider-items .nivo-nextNav::after {
        left: 6px;
        top: 2px;
    }
    .btn.btn-buttons {
        font-size: 11px;
        margin: 3px 1px;
        padding: 6px 9px;
    }
    .service-item.service-frist-item {
        padding-top: 60px;
    }
    .about-content {
        text-align: center;
    }
    .about-title {
        float: none;
        font-size: 25px;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .about-image {
        float: none;
        height: 300px;
        margin: 60px auto auto;
        width: 300px;
    }
    .priceing-content:first-child {
        margin-top: 0;
    }
    .priceing-content {
        margin: 30px 0 0 !important;
    }
    div.portfolio-content:hover .images-link {
        margin-left: 63px;
    }
    div .portfolio-content:hover .image-view {
        margin-right: 63px;
    }
    .portfolio-content {
        padding: 45px 20px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 65px;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 84px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 84px;
    }
    .team-content .des {
        line-height: 24px;
        padding: 57px 6px 11px;
    }
    .populer-content > h1 {
        font-size: 22px;
        padding: 53px 0;
    }
    .footer-section p {
        font-size: 14px;
        padding: 12px 0;
    }
}

@media only screen and (max-width: 480px) {
    div.portfolio-content:hover .images-link {
        margin-left: 63px;
    }
}


/* Large Mobile :480px. */

@media only screen and (max-width: 480px) {
    .slide-content {
        left: 60px;
        max-width: 188px;
        text-align: center;
        top: 27%;
    }
    .navbar-header {
        width: 144px;
    }
    .nivo-directionNav a {
        height: 30px;
        padding: 6px;
        width: 30px;
    }
    .btn.btn-buttons {
        font-size: 11px;
        margin: 3px 1px;
        padding: 6px 9px;
    }
    .header-section .navbar-default {
        border-color: transparent;
        left: -115px;
        min-height: 61px;
        min-width: 322px;
        position: absolute;
        top: 0;
    }
    .navbar-toggle,
    .navbar-toggle:focus {
        border-color: #be9342 !important;
        border-radius: 0;
        position: absolute;
        right: 35px;
        top: -10px;
    }
    .menu-section .navbar-collapse {
        overflow: hidden;
    }
    .slider-items .nivo-prevNav::after {
        left: 6px;
        top: 3px;
    }
    .slider-items .nivo-nextNav::after {
        left: 6px;
        top: 2px;
    }
    .menu-section .header-search {
        padding-bottom: 2px;
    }
    .search-hidden input {
        min-width: auto;
    }
    .search-hidden {
        top: 63px;
    }
    .search-hidden button {
        right: 26px;
    }
    .slide-content > h2 {
        font-size: 14px;
        line-height: 22px;
    }
    .nivo-prevNav {
        left: 24px;
    }
    .nivo-nextNav {
        right: 24px;
    }
    div .nivoSlider img {
        height: 300px !important;
    }
    .slide-content > p {
        font-size: 13px;
        padding-bottom: 17px;
        padding-top: 6px;
    }
    .service-item.service-frist-item {
        padding-top: 60px;
    }
    .service-item-content > p {
        padding: 0 8px;
    }
    .service-icon {
        display: block;
        margin: 0 auto;
        overflow: hidden;
        text-align: center;
        float: none;
    }
    .service-item-content {
        padding: 54px 0px 30px;
        text-align: center;
    }
    .service-item {
        padding: 10px;
    }
    .about-content {
        text-align: center;
    }
    .about-image {
        float: none;
        height: 270px;
        margin: 60px auto auto;
        width: 270px;
    }
    .about-title {
        float: none;
        font-size: 25px;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .portfolio-item-content > img {
        width: 100%;
    }
    .portfolio-categories > li {
        display: block;
        margin: 7px;
    }
    .portfolio-content {
        padding: 37px 20px;
    }
    .portfolio-content:hover .portfolio-line {
        top: 57px;
    }
    .team-hover-item {
        padding: 93px 17px;
    }
    .team-hover-item:hover .team-icon-1 {
        left: 77px;
    }
    .team-hover-item:hover .team-icon-3 {
        right: 75px;
    }
    .team-items .social-link {
        padding-top: 18px;
    }
    .team-hover-item:hover .team-icon-2 {
        top: 111px;
    }
    .populer-content > h1 {
        font-size: 18px;
        padding: 32px 0;
    }
    .footer-social {
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }
    .footer-section .pull-right {
        float: none !important;
    }
    .footer-section p {
        padding: 12px 0;
    }
    .footer-copyright,
    .footer-social {
        float: none;
        text-align: center;
    }
}