/* --------------------------------------
=========================================
Mustang Studio - Multipurpose Landing Page
Version: 1.0
Designed By: DeMustang
=========================================
-----------------------------------------

1. GLOABL-CSS
	1.1 IMPORT GOOGLE WEBFONT
	1.2 GENERAL-CSS
	1.3 TYPOGRAPHY

2. MASTER COLOR SETTINGS (TO CHANGE ENTIRE THEME)
	2.1 BACKGROUND COLOR SETTINGS
	2.2 BORDER COLOR SETTINGS
	2.3 TEXT COLOR SETTINGS 

3. HEADER SECTION
	3.1 HEADER TOP
	3.2 HEADER BANNER

4. NAVIGATION SECTION

5. ABOUT SECTION

6. FEATURES SECTION

7. OUR EXPERTIES SECTION

8. PORTFOLIO SECTION

9. SERVICES SECTION

10. CLIENT SECTION

11. QUOTES SECTION

12.BLOG SECTION

13.CONTACT SECTION

14.FOOTER SECTION
	14.1 FOOTER-TOP
	14.2 FOOTER-BOTTOM

-----------------------------------------*/


/* --------------------------------------
=========================================
   1. GLOABL - CSS
=========================================
-----------------------------------------*/


/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

/*---------------------------------------
font-family: 'Open Sans', sans-serif;
-----------------------------------------*/


/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/

body {
    background: #000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    /* PIXEL FALLBACK */
    font-size: 1.4rem;
    line-height: 1.5;
    color: #474747;
    overflow-x: hidden;
}

.btn, button {
    color: #fff;
    font-size: 14px;
    /* PIXEL FALLBACK */
    font-size: 1.4rem;
    border: none;
    font-weight: bold;
    padding: 13px 30px;
    border-radius: 30px;
    text-transform: uppercase;
    margin-top: 15px;
}
.btn:hover, .btn:visited {
    color: #fff;
    text-decoration: none;
}

.button {
    backface-visibility: hidden;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    z-index: 1;
}

.button--isi {
    overflow: hidden;
}

.button--isi::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    margin: -15px 0 0 1px;
    width: 70px;
    height: 30px;
    border-radius: 50%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale3d(1, 2, 1);
    transform: scale3d(1, 2, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
}

.button--isi:hover::before {
    -webkit-transform: scale3d(9, 9, 1);
    transform: scale3d(10, 9, 1);
}

iframe {
    border: none;
}

.width-680 {
    display: inline-block;
    margin-top: 10px;
    max-width: 680px;
}

a,
a:hover,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus{
    outline: none !important;
}

section {
    padding: 100px 0;
}

.vertical-line {
    display: inline-block;
    margin-bottom: 10px;
}

.center-line {
    display: inline-block;
    position: relative;
    height: 4px;
    margin: 10px 0 0;
    vertical-align: top;
    width: 95px;
    z-index: 1;
}

.red-bg .center-line {
    margin-bottom: 20px;
}


/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/

h1 {
    font-size: 60px;
    /* PIXEL FALLBACK */
    font-size: 6rem;
    font-weight: normal;
    text-transform: uppercase;
}

h2 {
    font-size: 46px;
    /* PIXEL FALLBACK */
    font-size: 4.6rem;
    font-weight: normal;
    margin-top: 0;
    text-transform: uppercase;
}

h3 {
    font-size: 36px;
    /* PIXEL FALLBACK */
    font-size: 3.6rem;
    font-weight: bold;
    margin-top: 0;
    text-transform: uppercase;
}

h4 {
    font-size: 24px;
    /* PIXEL FALLBACK */
    font-size: 2.4rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0;
}

h5 {
    font-size: 16px;
    /* PIXEL FALLBACK */
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0px;
}

.main-text {
    font-size: 16px;
    /* PIXEL FALLBACK */
    font-size: 1.6rem;
	font-weight: 600;
}

h1 span {
    font-weight: normal;
}

h2 span {
    font-weight: normal;
}

h3 span {
    font-weight: normal;
}

.vertical-line h2 {
    margin: -4px 0 -2px 10px;
}


/* --------------------------------------
=========================================
   2. MASTER COLOR SETTINGS
=========================================
-----------------------------------------*/


/*---------------------------------------
   2.1 BACKGROUND COLOR SETTINGS               
-----------------------------------------*/


/*-- RED BACKGROUND --*/

.red-bg,
.center-line,
#object,
header .social-icons > ul::before,
header .social-icons > ul::after,
.social-icons li a,
.scale span,
.portfolio-box figure,
.service-box i,
.team-title,
.image-link,
.blog-image span,
#newsletter-error,
#signup-error,
button,
.btn {
    background-color: #5D0087;
}


/*-- WHITE BACKGROUND --*/

.white-bg,
.red-bg .center-line,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover,
.active > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.portfolio-box span {
    background-color: #000000;
}


/*-- GRAY BACKGROUND --*/

.gray-bg,
#loading {
    background-color: #333;
}

.scale,
.footer-bottom,
.team .social-icons li a {
    background-color: #000;
}

.services {
    background: rgba(0, 0, 0, 0) url("../img/service-bg2.jpg") no-repeat scroll center center / cover;
}

.experties {
    background: rgba(0, 0, 0, 0) url("../img/expert.jpg") no-repeat scroll center center / cover;
}

header .button--isi::before,
.team .button--isi::before {
    background: #000000;
}

.button--isi::before {
    background: #000;
}

footer .button--isi::before {
    background: #333;
}

/*-- GREEN BACKGROUND --*/

#signup-success {
    background: #5a9c25;
}

/*---------------------------------------
   2.2 BORDER COLOR SETTINGS               
-----------------------------------------*/

.vertical-line {
    border-left: 4px solid #5D0087;
}

.form-holder i {
    border: 3px solid;
}

ul.footer-nav li {
    border-right: 1px solid;
}

.button.underline {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    padding: 10px 0;
    margin-left: 30px;
}

.button.underline::before,
.button.underline::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: calc(100% - 10px);
    border-bottom: 1px solid #474747;
}

.button.underline::after {
    margin-top: 2px;
    border-bottom: 4px solid #5D0087;
    -webkit-transform: translate3d(-101%, 0, 0);
    transform: translate3d(-101%, 0, 0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.button.underline:hover::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/*---------------------------------------
   2.3 TEXT COLOR SETTINGS               
-----------------------------------------*/

h1 strong,
h2 strong,
h3,
h4 span,
.client-box p i,
.footer-bottom p span,
ul.footer-nav li a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover,
.active > a:focus,
#signup-success i,
#signup-error i,
footer a:hover {
    color: #5D0087;
}

.red-bg h2,
.red-bg h2 strong,
.red-bg h4,
.red-bg p,
h1,
header h5,
.navbar-default .navbar-nav  li  a:focus,
.portfolio-box p,
.portfolio-box h4,
.services h2,
.services p,
.services h4,
.service-box i,
.team-title h4,
.team-title p,
.team-box .social-icons li i,
.navbar-default .navbar-nav > li > a,
.social-icons li i,
.team-box .social-icons li:hover i,
.image-link i,
.blog-image span,
#newsletter-error,
#signup-error,
#signup-success,
.footer-bottom p,
.footer-top i,
footer a {
    color: #fff;
}

h2 {
    color: #000;
}

h3 span,
.scale-list h4,
.client-box p strong,
.blog-box h5 {
    color: #000;
}

h4 {
    color: #000;
}

.blog-sub {
    color: #7e7e7e;
}

ul.footer-nav li a {
    color: #696969;
}

#signup-success i {
    color: #000000;
}


/* --------------------------------------
=========================================
   3. PRELOADER
=========================================
-----------------------------------------*/


/*---------------------------------------
   3.1 LOADING               
-----------------------------------------*/

#loading {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    margin-top: 0px;
    top: 0px;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
}

#object {
    width: 30px;
    height: 30px;
    -webkit-animation: animate 1s infinite ease-in-out;
    animation: animate 1s infinite ease-in-out;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
}


/*---------------------------------------
   3.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
    0% {
        -webkit-transform: perspective(160px);
    }
    50% {
        -webkit-transform: perspective(160px) rotateY(-180deg);
    }
    100% {
        -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg);
    }
}

@keyframes animate {
    0% {
        transform: perspective(160px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    }
}


/* --------------------------------------
=========================================
   3. HEADER SECTION
=========================================
-----------------------------------------*/

header {
    height: 100vh;
    text-align: center;
    padding-bottom: 110px;
    position: relative;
    width: 100%;
    display: table;
}

header::before {
    background-color: rgba(0, 0, 0, .5);
    content: " ";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.header-inner-middle {
    display: table-cell;
    vertical-align: middle;
    height: 100vh;
    float: none;
}

.header-inner-middle button, .header-inner-middle .btn {
    margin-top: 40px;
}


/* --------------------------------------
	3.1 HEADER TOP
-----------------------------------------*/

.header-top {
    display: inline-block;
    line-height: 92px;
    width: 100%;
    height: 92px;
}

ul.social-icons {
    display: inline-block;
    margin: 5px 0 0;
    padding: 0;
    text-align: center;
}

.social-icons li {
    float: left;
    font-size: 17px;
    list-style: outside none none;
    margin: 0 10px;
}

header .social-icons {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

header .social-icons ul {
    display: inline-block;
    padding: 0 10px;
    position: relative;
}

header .social-icons > ul::before,
header .social-icons > ul::after {
    content: "";
    height: 7px;
    margin-top: -3px;
    position: absolute;
    top: 50%;
    width: 1200%;
}

.social-icons li a {
    border-radius: 50%;
    display: inline-block;
    font-size: 19px;
    height: 35px;
    line-height: 35px;
    width: 35px;
}

header .social-icons > ul:before {
    left: 100%;
}

header .social-icons > ul:after {
    right: 100%;
}


/* --------------------------------------
	3.2 HEADER BANNER
-----------------------------------------*/

.logo {
    margin-bottom: 30px;
    margin-top: 30px;
}

header h5 {
    margin-top: 30px;
}


/* --------------------------------------
=========================================
   4. NAVIGATION SECTION
=========================================
-----------------------------------------*/

.nav-section {
    padding: 0;
	position: relative;
}

.navigation,
section {
    position: relative;
}

.navigation {
    height: 110px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 0;
    text-align: center;
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.nav-logo {
    display: inline-block;
    margin: 0 20px;
}

.navbar-nav {
    display: inline-block;
    float: none;
    margin: 0;
    vertical-align: middle;
}

.navbar {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    margin: 0;
}

.navbar-default .navbar-nav > li > a {
    line-height: 30px;
    padding: 0 20px !important;
    text-align: center;
    margin: 0 2px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 20px;
    outline: none;
}

.navigation-scrolled {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}


/* --------------------------------------
=========================================
   5. ABOUT SECTION
=========================================
-----------------------------------------*/

.about-left {
    text-align: left;
}

.about-left .vertical-line {
    margin-bottom: 30px;
}

.about-left h5 {
    text-transform: none;
    color: #000;
}

.about-left h5 span {
    font-weight: normal;
}

.about-left img {
    margin: 30px 0 10px;
}

.about-image img {
    width: 100%;
    max-width: 475px;
    position: absolute;
}


/* --------------------------------------
=========================================
   6. FEATURES SECTION
=========================================
-----------------------------------------*/

.features-list {
    margin-bottom: 40px;
}

.features-list:last-child {
    margin-bottom: 0px;
}

.features-image > img {
    position: absolute;
}


/* --------------------------------------
=========================================
   7. OUR EXPERTIES SECTION
=========================================
-----------------------------------------*/

.scale {
    width: 100%;
    display: inline-block;
    height: 35px;
}

.scale-list h4 {
    margin-top: 40px;
}

.scale span {
    display: inline-block;
    height: 34px;
}


/* Skills bar effects */

.skillbar {
    position: relative;
    display: inline-block;
    margin: 0;
    background: #000;
    height: 35px;
    width: 100%;
}

.skillbar-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    font-weight: bold;
    font-size: 13px;
    color: #ffffff;
    background: #6adcfa;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    height: 35px;
    line-height: 35px;
}

.skillbar-bar {
    height: 35px;
    width: 0px;
    background: #5D0087;
    display: inline-block;
}

.skill-bar-percent {
    color: #5D0087;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    position: absolute;
    right: 0;
    top: -40px;
}


/* --------------------------------------
=========================================
   8. PORTFOLIO SECTION
=========================================
-----------------------------------------*/

.portfolio {}

.portfolio-box {
    margin-top: 50px;
    position: relative;
}

.portfolio-box img {
    width: 100%;
}

.portfolio-box figure {
    cursor: zoom-in;
    /*cursor: url(../img/open.svg), auto;*/
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    width: 100%;
}

.portfolio-box h4 {
    margin: 0px;
    position: relative;
    top: 35%;
    transform: translate(0px, -15px);
}

.portfolio-box p {
    margin: 0px;
    position: relative;
    top: 35%;
    transform: translate(0px, 15px);
    height: 145px;
}

.portfolio-box span {
    display: inline-block;
    height: 2px;
    width: 50px;
    position: relative;
    top: 0;
    vertical-align: top;
    transform: translate(0px, 25px);
}

.portfolio-box:hover figure {
    opacity: 1;
}

.portfolio-box h4,
.portfolio-box p,
.portfolio-box span {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s, color 0.4s ease 0s;
    opacity: 0;
}

.portfolio-box:hover h4,
.portfolio-box:hover p,
.portfolio-box:hover span {
    transform: translate(0px, 0px);
    opacity: 1;
}


/* --------------------------------------
=========================================
   9. SERVICES SECTION
=========================================
-----------------------------------------*/

.services {
    padding-bottom: 80px;
    padding-top: 80px;
}

.services::before {
    background-color: rgba(0, 0, 0, 0.5);
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.service-box {
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 40px;
    position: relative;
    text-align: left;
}

.service-box p {
    display: flex;
}

.service-box i {
    border-radius: 50%;
    display: inline-block;
    float: left;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 65px;
    margin: 0 15px 32px 0;
    text-align: center;
    width: 65px;
}


/* --------------------------------------
=========================================
   10. TEAM SECTION
=========================================
-----------------------------------------*/

.team {
    text-align: center;
}

.team-box {
    margin-top: 50px;
}

.team-box > img {
    width: 100%;
}

.team-title {
    margin-bottom: 15px;
    padding: 25px 0;
}

.team-title p {
    margin: 0px;
    text-transform: uppercase;
}

.team-box .social-icons {
    margin: 0px;
}

.team-box .social-icons li {
    margin: 10px 7px;
}

.team-box .social-icons li i {
    font-size: 15px;
    transition: all ease .5s;
}


/*---------------*/


/***** Ruby *****/


/*---------------*/

.effect-ruby {
    overflow: hidden;
}

.effect-ruby img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    width: 100%;
}

.team-box:hover .effect-ruby img {
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* --------------------------------------
=========================================
   11. QUOTES SECTION
=========================================
-----------------------------------------*/

.client-box {
    margin-top: 50px;
}

.client2-image {
    border-radius: 50%;
    box-shadow: 0 0 25px 0 #d6d6d6 inset;
    display: inline-block;
    position: relative;
    height: 160px;
    overflow: hidden;
    width: 160px;
}

.image-link {
    height: 160px;
    left: 0;
    position: absolute;
    top: 0;
    width: 160px;
    border-radius: 50%;
    box-shadow: 0 0 25px 0 #c90505 inset;
    opacity: 0;
    transition: all ease .4s;
}

.image-link a {
    text-decoration: none !important;
}

.image-link i {
    font-size: 55px;
    line-height: 160px;
    position: relative;
    top: -100%;
    transition: all 0.3s ease 0.1s;
}

.client-box:hover .image-link {
    opacity: 1;
}

.client-box:hover .image-link i {
    top: 0px;
}

.client-box p i {
    font-size: 35px;
    left: 0;
    position: absolute;
    top: 0;
}

.client-box p {
    position: relative;
    padding-left: 55px;
    text-align: left;
    margin: 5px 0 0;
}
.client-box .main-text {
    font-size: 18px;
    /* PIXEL FALLBACK */
    font-size: 1.8rem;
	font-weight: normal;
}


/* --------------------------------------
=========================================
   12.BLOG SECTION
=========================================
-----------------------------------------*/

.blog {}

.blog-box {
    margin-top: 50px;
    text-align: left;
}

.blog-image {
    overflow: hidden;
    position: relative;
    text-align: center;
}

.blog-image img {
    width: 100%;
}

.blog-image span {
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    height: 155px;
    left: -63px;
    line-height: 15px;
    padding: 90px 0 0 50px;
    position: absolute;
    text-transform: uppercase;
    top: -65px;
    width: 155px;
}

.blog-image span strong {
    font-size: 36px;
}

.blog-box h5 {
    font-size: 18px;
    margin-bottom: 0;
    text-transform: uppercase;
    margin-top: 20px;
}

.blog-box button, .blog-box .btn {
    margin-top: 10px;
}


/* --------------------------------------
=========================================
   13.CONTACT SECTION
=========================================
-----------------------------------------*/

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


.contact-form input {
    min-height: 60px;
}

.contact-form input,
.contact-form textarea {
    margin: 13px 0;
    padding-left: 40px;
    top: 2px;
}

.contact-form button, .contact-form .btn {
    font-size: 18px;
    margin-top:20px;
    width: 300px;
}

.col-md-12.form-holder {
    margin-top: 30px;
}

.form-holder i {
    border-radius: 50%;
    font-size: 38px;
    height: 80px;
    line-height: 71px;
    margin-bottom: 20px;
    text-align: center;
    width: 80px;
}

#signup-success, #signup-error {
    width: 100%;
    padding: 30px;
    margin-bottom: 20px;
    float: left;
    display: none;
    font-weight: normal;
    margin-top: 30px;
}

#signup-error ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#signup-success i,
#signup-error i {
    background: #fff;
    border-radius: 50%;
    width: 50px;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    float: left;
}

#signup-success p,
#signup-error label {
    float: left;
    padding-left: 20px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 500;
}


/* --------------------------------------
=========================================
   14.FOOTER SECTION
=========================================
-----------------------------------------*/

footer {
    text-align: center;
}


/* --------------------------------------
	14.1 FOOTER-TOP
-----------------------------------------*/

.footer-top {
    padding-bottom: 125px;
    padding-top: 50px;
}

.footer-top .col-sm-4 {
    margin-top: 50px;
}

.footer-top p {
    text-transform: uppercase;
    margin: 0px;
    line-height: 24px;
}

.footer-top i {
    font-size: 60px;
}


/* --------------------------------------
	14.2 FOOTER-BOTTOM
-----------------------------------------*/

.footer-bottom {
    float: left;
    padding-bottom: 60px;
    width: 100%;
}

.footer-logo {
    margin-top: -70px;
}

.footer-bottom p {
    font-size: 14px;
}

.footer-bottom ul.social-icons {
    background: none;
    margin: 30px 0;
}

.footer-bottom ul.social-icons li a {
    border-radius: 50%;
    font-size: 22px;
    height: 60px;
    line-height: 60px;
    width: 60px;
}

ul.footer-nav {
    margin: 0px;
    padding: 0px;
}

ul.footer-nav li {
    display: inline-block;
    line-height: 15px;
    list-style: outside none none;
    margin-left: 9px;
    padding-right: 10px;
}

ul.footer-nav li:last-child {
    border: none;
}

ul.footer-nav li a {
    font-size: 14px;
}

ul.footer-nav li a:hover {
    text-decoration: none;
}


/* --------------------------------------
=========================================
   15. RESPONSIVE FIXES
=========================================
-----------------------------------------*/


/* --------------------------------------
	15.1 MAX WIDTH 1199PX
-----------------------------------------*/

@media only screen and (max-width: 1199px) {
    .navbar-default .navbar-nav > li > a {
        padding: 0 15px !important;
        font-size: 15px;
    }
    .portfolio-image img {
        width: 100%;
    }
    .portfolio-image {
        height: 206px;
        width: 206px;
    }
    .portfolio-image i {
        line-height: 200px;
    }
    .features-list:last-child {
        margin-bottom: 50px;
    }
    .about-image img {
        top: 120px;
    }
}


/* --------------------------------------
	15.2 MAX WIDTH 991PX
-----------------------------------------*/

@media only screen and (max-width: 991px) {
    header {
        height: 50vh;
    }
    .header-inner-middle {
        height: 50vh;
    }
    .header-bottom {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .logo {
        margin-top: 0px;
    }
    .navbar-default .navbar-nav > li > a {
        font-size: 12px;
        padding: 0 10px !important;
    }
    .about-image {
        height: 400px;
    }
    .about-image img {
        top: 50px;
    }
    .features-left {
        width: 100%;
    }
    .features-image {
        width: 100%;
    }
    .features-image > img {
        margin-left: 0;
        width: 100%;
        position: relative;
    }
    .portfolio-image {
        height: 315px;
        width: 315px;
    }
    .portfolio-image i {
        line-height: 300px;
    }
    .col-sm-6.text-center.expert-image > img {
        width: 100%;
    }
    .scale {
        height: 20px;
    }
    .scale span {
        height: 19px;
        vertical-align: top;
    }
    .client-image,
    .client-right {
        text-align: center;
        width: 100%;
    }
    .col-sm-6.client-image > img {
        max-width: 420px;
        width: 80%;
    }
    .service-box i {
        margin: 0 15px 0px 0;
    }
    .owl-pagination {
        top: -40px;
    }
}


/* --------------------------------------
	15.3 MAX WIDTH 767PX
-----------------------------------------*/

@media only screen and (max-width: 767px) {
    .navbar-collapse {
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        margin-top: 39px;
    }
    .nav-logo {
        position: absolute;
        top: 0;
        left: 0;
    }
    .nav.navbar-nav {
        padding-bottom: 10px;
        width: 100%;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: #5D0087;
    }
    .client-box p {
        text-align: center;
    }
    .client-box p i {
        top: -21px;
    }
    .portfolio .col-sm-3 {
        width: 100%;
    }
    .col-sm-6.expert-right {
        padding-bottom: 30px;
    }
    .expert-image > img {
        max-width: 325px;
    }
    .owl-theme .owl-controls {
        margin-top: 0;
    }
}


/* --------------------------------------
	15.4 MAX WIDTH 480PX
-----------------------------------------*/

@media only screen and (max-width: 480px) {
    h1 {
        font-size: 4.0rem;
    }
    h2 {
        font-size: 2.8rem;
    }
    h3 {
        font-size: 1.8rem;
    }
    h4 {
        font-size: 1.8rem;
    }
    .main-text {
        font-size: 14px;
        font-size: 1.4rem;
    }
    .skill-bar-percent {
        font-size: 18px;
    }
    .button.underline {
        margin-left: 0;
    }
    .about-image {
        height: 200px;
    }
    .portfolio-image {
        height: 255px;
        width: 255px;
    }
    .portfolio-image i {
        line-height: 250px;
    }
    .social-icons li {
        margin: 0 5px;
    }
    .footer-bottom ul.social-icons li i {
        font-size: 17px;
        line-height: 45px;
        width: 45px;
    }
}