/*

[RESPONSIVE STYLES]

Template: iProof - Multipurpose HTML Template
Author: ThemeAtelier
Author URI: https://themeforest.net/user/themeatelier


[NOTE]
------
PLEASE DO NOT EDIT THIS CSS FILE, YOU MAY NEED TO USE 'custom.css' FILE FOR WRITING YOUR CUSTOM CSS STYLES.
WE MAY RELEASE FUTURE UPDATES SO IT WILL OVERWRITE THIS FILE. IT'S BETTER AND SAFER TO USE 'custom.css' file.


[TABLE OF CONTENTS]

1. MEDIA QUERIES
    1.1. DESKTOP
    1.2. DESKTOP SMALL
    1.3. TABLET
    1.4. MOBILE

*/

/* ------------------------------------
    1. MEDIA QUERIES
------------------------------------ */
/* 1.1. DESKTOP */
@media screen and (max-width: 1199px) {

}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* HEADER SECTION */
    .header--nav-links > li + li {
        margin-left: 7.5px;
    }
}

@media screen and (min-width: 992px) {
    /* VERTICAL CENTERING */
    .row--vc-md > div {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
}

/* 1.2. DESKTOP SMALL */
@media screen and (max-width: 991px) {
    /* FLOATS */
    .float--sm-none {
        float: none;
    }

    /* HEADER SECTION */
    .header--navbar > .container {
        position: relative;
    }

    .header--navbar .navbar-header {
        float: none;
    }

    .header--navbar .navbar-toggle {
        display: block;
        margin-right: 0;
    }

    .header--navbar .navbar-collapse {
        display: none !important;
        max-height: 320px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-top-width: 0;
        box-shadow: none;
        overflow: auto !important;
    }

    .header--navbar .navbar-collapse.collapsing,
    .header--navbar .navbar-collapse.in {
        display: block !important;
    }

    .header--nav-links {
        float: none;
        margin-top: 15px;
        color: #222;
        background-color: #fff;
    }

    .header--nav-links > li {
        float: none;
    }

    .header--nav-links > li + li {
        margin-left: 0;
    }

    .header--nav-links > li > a {
        padding: 12px 15px;
    }

    .header--nav-links > .dropdown > .dropdown-menu {
        float: none;
        display: none;
        position: relative;
        margin-top: 0;
        margin-left: 15px;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
    }

    .header--nav-links > .dropdown:hover > .dropdown-menu {
        display: none;
        margin-top: 0;
    }

    .header--nav-links > .dropdown.open > .dropdown-menu {
        display: block;
    }

    .header--custom-btn {
        float: none;
        position: absolute;
        top: 0;
        right: 75px;
    }

    .header--custom-btn .btn {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* BANNER SECTION */
    .banner--content-wrapper:not(:last-child),
    .banner--img-wrapper {
        height: auto !important;
    }
	
	/* FEATURES SECTION */
	.feature--item-bg {
		position: relative;
		left: 0;
		width: 100%;
		min-height: 380px;
	}

    /* CALL TO ACTION */
    .call-to-action .content {
        padding-right: 0;
        text-align: center;
    }

    .call-to-action .btn {
        position: relative;
        top: 0;
        margin-top: 24px;
    }

    /* COMMENT LIST */
    .comment--items .comment--items {
        padding-left: 0;
    }

    /* CONTACT SECTION */
    .row > .contact--content {
        padding: 0 0 60px;
    }

    .contact--map .map {
        height: 300px !important;
        min-height: 300px;
    }

    /* HIRE ME MODAL */
    .hireme--modal .modal-dialog {
        max-width: 720px;
    }
}

/* 1.3. TABLET */
@media screen and (max-width: 767px) {
    /* HEADER SECTION */
    .header--navbar > .container .navbar-brand {
        margin-left: 15px;
    }

    .header--navbar .navbar-toggle {
        margin-right: 15px;
    }

    .header--navbar .navbar-collapse {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* PRICING SECTION */
    .pricing--item {
        margin-top: 0;
    }

    /* HIRE ME MODAL */
    .hireme--modal .modal-dialog {
        max-width: none;
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
    }

    .hireme--modal .modal-info {
        float: none;
    }

    .hireme--modal .modal-info .text {
        top: 0;
        left: 80px;
        right: 0;
        -webkit-transform: none;
        transform: none;
        font-size: 5em;
        line-height: 168px;
        text-align: center;
    }

    .hireme--modal .modal-content {
        border-radius: 0 0 4px 4px;
    }
}

/* 1.4. MOBILE */
@media screen and (max-width: 480px) {
    /* HELPER CLASSES */
    .col-xxs-12 {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .font--sizbig {
        font-size: 60px !important;
        line-height: 70px !important;
    }

    .latter--spacing9 {
        letter-spacing: 7px !important;
    }

    /* SECTION TITLE */
    .section--title .h2 {
        font-size: 26px;
    }

    .section--title p {
        font-size: 18px;
    }

    /* BANNER SECTION */
    .banner--content .h3 {
        margin-top: 25px !important;
        font-size: 24px;
        line-height: 34px;
    }

    .banner--description.mtop--35 {
        margin-top: 25px !important;
    }

    /* SERVICES SECTION */
    .service--item .info .title .h3 {
        font-size: 20px;
        line-height: 30px;
    }

    /* CALL TO ACTION SECTION */
    .call-to-action .content .h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .call-to-action .quote .h1 {
        font-size: 30px;
        line-height: 40px;
    }

    /* BLOG SECTION */
    .post--author .img {
        float: none;
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* EXPERIENCE SECTION */
    .exp--items > li {
        position: relative;
        z-index: 0;
    }

    .exp--items:before {
        display: none;
    }

    .exp--items > li > .date {
        float: none;
        position: absolute;
        top: 0;
        left: 4px;
        right: 0;
        min-width: 0;
        margin-right: 0;
        padding: 5px 30px;
        border-bottom: 1px solid #ccc;
        text-align: left;
    }

    .exp--items > li > .date:before,
    .exp--items > li > .date:after {
        display: none;
    }

    .exp--items > li > .info {
        padding-top: 53px;
    }

    /* HIRE ME MODAL */
    .hireme--modal .modal-info {
        padding: 30px 15px;
    }

    .hireme--modal .modal-info .img {
        margin: 0 auto;
    }

    .hireme--modal .modal-info .text {
        position: relative;
        top: 0;
        left: 0;
        margin-top: 30px;
        font-size: 60px;
        line-height: 80px;
    }

    .hireme--modal .modal-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hireme--modal .input-group {
        display: block;
    }

    .hireme--modal .input-group .form-control {
        display: block;
        float: none;
    }

    .hireme--modal .input-group-btn {
        display: block;
        width: auto;
        margin-top: 20px;
        padding-left: 0;
        text-align: center;
    }
}

@media screen and (max-width: 320px) {
    /* HEADER SECTION */
    .header--custom-btn {
        display: none;
    }
}
