/******************************
RESPONSIVE STYLES 
******************************/
@media screen and (max-width: 1200px) {
    .banner .slick-arrow.slick-prev {
        left: 15px;
    }
    .banner .slick-arrow.slick-next {
        right: 15px;
    }
}

@media screen and (max-width: 1100px) {
	.banner .single-banner {
		background-attachment: scroll;
	}
    .banner-bottom-line .container,
    .latest-posts .container {
        padding: 0 15px;
    }
    .banner-bottom-line {
        bottom: 30px;
    }
    .move-down {
        bottom: 0;
    }
    .about-wrapper .container > .flexbox > div {
        padding: 0 0 0 20px;
    }
    .about-wrapper .container > .flexbox > div:first-child {
        padding: 0 20px 0 0;
    }
    .quick-link,
    .quick-link:hover {
        height: 350px;
    }
    .posts-slider .slick-list {
        margin: 0 -8px;
    }
    .posts-slider .blog-post {
        margin: 0 8px;
    }
    .footer-wrapper .flexbox > div:first-child {
        padding-right: 15px;
    }
    
    .section-content .table.page,
    .section-content .table.page .cell {
	    display: block;
	    width: 100% !important;
    }
    .section-content .table.page .cell:not(:only-child):first-child {
	    text-align: center !important;
    }
    
    .service-wrapper .close-btn-sm,
    .service-control {
	    left: auto;
	    right: 10px;
    }
}

@media screen and (max-width: 1000px) {
    h1,
    h2.heading span,
    .large-text {
        font-size: 52px;
    }
    .large-text span {
        font-size: 68px;
    }
    .quick-link {
        font-size: 20px;
    }
    .quick-link:hover {
        width: 25%;
    }
}

@media screen and (max-width: 900px) {
    h1,
    h2.heading span,
    .large-text {
        font-size: 45px;
    }
    h2,
    .sub-banner .large-text {
        line-height: 40px;
        font-size: 35px;
    }
    h3,
    .nav-menu > li > a {
        font-size: 30px;
    }
    .heading {
        padding: 0 110px;
    }
    #header {
        height: 78px;
    }
    .logo {
        width: 380px;
    }
    .main-nav {
        top: 78px;
    }
    .banner-text {
        max-width: 300px;
    }
    .large-text span {
        font-size: 58px;
    }
    .quote-box {
        min-height: auto;
        padding: 45px 0 25px;
        font-size: 24px;
    }
    .quote-box:before {
        margin-bottom: -15px;
        line-height: 55px;
        font-size: 80px;
    }
    .quote-box .container > * {
        display: block;
    }
    .quote-box .author:before {
        margin: 0 10px 0 0;
    }
    #about,
    .about-wrapper {
        padding: 0;
        text-align: center;
    }
    .about-wrapper .container > .flexbox {
        padding-top: 45px;
    }
    .about-wrapper .container > .flexbox > div {
        width: 100%;
        padding: 0;
    }
    .about-wrapper .container > .flexbox > div:first-child {
        padding: 0;
    }
    #about .quote-box,
    .about-wrapper .quote-box {
        position: static;
        display: block;
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 45px 15px;
        text-align: inherit;
    }
    #about .quote-box:before,
    .about-wrapper .quote-box:before {
        position: static;
    }
    #about .large-text,
    .about-wrapper .large-text {
        font-size: 35px;
    }
    #about .img-box,
    .about-wrapper .img-box {
        max-width: 500px;
        height: 300px;
        margin: 0 auto;
    }
    #introduction h5:after,
    .about-wrapper h5:after {
        width: 188px;
        margin: 10px auto 40px;
    }
    .quick-links-wrapper {
        padding-top: 45px;
    }
    .quick-links-wrapper .flexbox {
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    .quick-link,
    .quick-link:hover {
        width: 50%;
    }
    .quick-link:hover {
        margin: 0;
    }
    .latest-posts {
        padding: 45px 0 50px;
    }
    .posts-slider {
        margin: 25px 0 50px;
    }
    .posts-slider-control {
        position: static;
        margin-top: 40px;
    }
    .main-content {
        padding: 45px 0 50px;
    }
    .main-content .container > .table,
    .main-content .col-left,
    .main-content .col-right {
        display: block;
    }
    .sidebar {
        width: 300px;
        margin: 50px auto 0;
        padding: 0;
    }
    .sidebar > *:not(:last-child),
    .sidebar .quick-link,
    .sidebar .quick-link:hover {
        margin-bottom: 40px;
    }
    .footer-wrapper {
        padding: 35px 0;
        text-align: center;
    }
    .footer-wrapper .flexbox {
        flex-direction: column;
        margin-top: 20px;
    }
    .footer-wrapper .flexbox > div:first-child {
        padding: 8px 0 0;
    }
    .footer-wrapper .flexbox > div:nth-child(2) {
        order: -1;
    }
    .footer-wrapper .flexbox > div:last-child {
        flex-basis: auto;
        flex-direction: column;
        padding: 15px 0 0;
        line-height: inherit;
        text-align: inherit;
    }
    .footer-wrapper ul {
        display: block;
    }
    .footer-wrapper .social a {
        font-size: 18px;
    }
    .jbsystem {
        margin: 0;
    }
    
    .service-wrapper > div:first-child {
	    width: 43%;
    }
    .service-wrapper > div:nth-child(2) {
	    width: 57%;
    }
    .service-wrapper .inner-box {
	    padding-left: 40px;
    }
}

@media screen and (max-width: 770px) { /* Tablet View */
    /*=== Main ===*/
    body {
        cursor: pointer; /* iOS Clicking Fix */
    }
    h1,
    h2.heading span,
    .large-text,
    .large-text.alt {
        font-size: 38px;
    }
    h2,
    .sub-banner .large-text,
    #about .large-text,
    .about-wrapper .large-text,
    .quote-box .author {
        font-size: 30px;
    }
    h3 {
        font-size: 28px;
    }
    h4,
    .quote-box {
        font-size: 20px;
    }
    .quote-box:before {
        font-size: 72px;
    }
    .btn {
        min-width: 165px;
        padding: 10px 15px 9px;
    }
    .nav-menu > li > a {
        padding: 10px 40px 10px 15px;
        font-size: 28px;
    }
    .sub-ctrl {
        top: 12px;
    }
    .large-text span {
        font-size: 48px;
    }
    .banner-bottom-line {
        display: none;
    }
    .sub-banner,
    .quick-link,
    .quick-link:hover,
    .sidebar .quick-link,
    .sidebar .quick-link:hover,
    .blog-post figure {
        height: 300px;
    }
    #introduction h5:after,
    .about-wrapper h5:after {
        width: 165px;
    }
    .quick-link .text-box {
        margin: 10px 0 -45px;
    }
    .blog-post .text-box [class*="fa-"] {
        font-size: 40px;
    }

}

@media screen and (max-width: 670px) { /* Phone View */
    .header-menu .container > .flexbox > div:first-child,
    .top-menu {
        display: none;
    }
    .header-menu .container > .flexbox > div:last-child {
        flex-basis: auto;
    }
    #nav-btn {
        margin-top: -4px;
    }
    .quick-links-wrapper {
        padding: 45px 0 30px;
    }
    .quick-links-wrapper .flexbox {
        width: 330px;
        margin: 0 auto;
    }
    .quick-link,
    .quick-link:hover {
        width: 100%;
        margin-bottom: 15px;
    }
    .posts-slider {
        width: 330px;
        margin: 25px auto 50px;
    }
    
    .service-wrapper > div:first-child {
        display: none;
    }
    .service-wrapper > div:last-child {
        width: 100%;
    }
    .service-wrapper .inner-box {
        max-width: inherit;
    }
    
    .service-right,
    .service-left {
	    transform: none !important;
    }
    #service {
	    opacity: 1 !important;
    }
}
@media screen and (max-width: 480px) {
    h1,
    h2.heading span,
    .large-text {
        font-size: 32px;
    }
    h3 {
        font-size: 26px;
    }
    .nav-menu > li > a {
        padding: 6px 40px 6px 15px;
        font-size: 24px;
    }
    .sub-menu {
        padding: 0 40px 0 0;
    }
    .heading {
        padding: 0;
        background: none;
    }
    .header-menu {
        padding: 25px 0;
    }
    .logo {
        width: 250px;
    }
    .banner {
        min-height: auto;
    }
    .banner-text {
        max-width: 100%;
    }
    .large-text span {
        font-size: 40px;
    }
    .large-text br {
        display: none;
    }
    .banner-content {
        margin-bottom: 35px;
    }
    .sub-banner,
    .quick-link,
    .quick-link:hover,
    .sidebar .quick-link,
    .sidebar .quick-link:hover,
    .blog-post figure,
    .blog-list .blog-post figure {
        height: 250px;
    }
    .blog-list .post-info {
        padding: 30px 15px;
    }
    #about .img-box,
    .about-wrapper .img-box {
        margin: 0;
    }
    .quote-box .author {
        font-size: 24px;
    }
}

@media screen and (max-width: 360px) {
    .quick-links-wrapper .flexbox,
    .posts-slider {
        width: 100%;
    }
    .posts-slider .slick-list,
    .posts-slider .blog-post {
        margin: 0;
    }
}