/* Responsive Layout*/
@media only screen and (max-width: 1024px) {
    .wrapper {
        width: 95%;
    }
    .home #top {
        overflow: hidden;
    }
    .home  .vg-TopHeight{
        height: 850px;
    }
    #primary-menu-container li {
        margin-left: 2px;
    }
    #featured .slide_content {
        width: 95%;
    }
    #featured .oneColumn #firstTitle {
        font-size: 10em;
        margin-bottom: -30px;
    }
    #featured .oneColumn #secondTitle {
        font-size: 3.125em;
    }
    #featured .twoColumns #firstTitle {
        font-size: 5.625em;
        margin-bottom: -10px;
    }
    #featured .twoColumns #secondTitle {
        font-size: 1.875em;
    }
    #featured .twoColumns .thumbnail {
        max-width: 43%;
        height: auto;
    }
    #featured .twoColumns #excerpt {
        width: 50%;
    }
    #featured #btns a {
        margin-right: 0;
    }
    .tax {
        height: 39px;
        line-height: 38px;
    }
    .tax ul li a {
        font-size: 12px;
        padding: 12px;
    }
    .entry iframe, .entry embed, .entry object {
        width: 100%;
        min-height:300px;
    }
    .entry img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
    .portfolios .portfolio-item {
        width: 29.6%;
        height: auto;
    }
    .portfolios .portfolio-item .overlay {
        display: none;
    }
    .portfolios .portfolio-item img {
        max-height: none;
        min-height: 0;
        height: auto;
    }
    .portfolios.columns4 .portfolio-item {
        width: 22.5%;
        height: auto;
    }
    .portfolios.columns5 .portfolio-item {
        width: 18.2%;
        height: auto;
    }
}
/* Responsive Layout*/
@media only screen and (max-width: 800px) {
    #primary-menu-container {
        min-width: 60%;
    }
    #primary-menu-container li {
        margin-left: 2px;
    }
    #primary-menu-container a {
        font-size: 0.65em;
    }
    #featured .slide_content {
        margin-left: -47%;
    }
    #featured .twoColumns #excerpt {
        width: 48%;
    }
    #featured .twoColumns .thumbnail {
        max-width: 30%;
        height: auto;
    }
    .config .item {
        width: 29%;
        padding-bottom: 10px;
        margin-right: 2%;
        margin-bottom: 4%;
    }
    blockquote.quote-type {
        width: 95%
    }
    .pricetable .plan {
        width: 24.5%;
    }
    .member {
        width:29.5%;
        margin: 0 2% 5% 0;
    }
    .contactform {
        width: 45%;
    }
    .contactinfo {
        width: 50%;
    }
    .contactform input, .contactform textarea {
        width: 100%;
    }
    .subscribe .subscribe-input {
        width: 60%;
    }
    #commentform dd {
        width: 70%
    }
    #commentform dd textarea {
        width: 100%;
    }
    #backtoTop, #blog-2columns .post .thumbnail {
        display: none;
    }
}
/* Responsive Layout*/
@media only screen and (max-width: 640px) {
    #mobileMenu{ display:none !important; }
    .css3-selectbox{ display:block !important; width:60% !important; float:right; }
    .home  .vg-TopHeight{
        height: 620px;
    }
    #mobile-menu{
        display: block;
    }
    #primary-menu-container, #top .social-icons {
        display: none;
    }
    #featured .slide_content {
        margin-top: 150px;
    }
    #featured .slide_bg {
        top: 40px;
    }
    #featured .slide_bg img {
        min-height: auto;
    }
    #featured .oneColumn #firstTitle, #featured .twoColumns #firstTitle {
        font-size: 6.2em;
        line-height: 1.2em;
        font-family: "league_gothic"
    }
    #featured .twoColumns #firstTitle {
        font-size: 4.2em;
    }
    #featured .oneColumn #secondTitle, #featured .twoColumns #secondTitle {
        font-size: 2.125em;
        font-family: "infinity"
    }
    #featured .twoColumns #secondTitle {
        font-size: 1.5em;
    }
    #featured #excerpt {
        width: 97%;
        font-size: 12px;
        line-height: 18px;
        padding: 4px 0;
    }
    #featured .twoColumns #excerpt {
        width: 55%;
    }
    #featured .twoColumns .thumbnail {
        width: 40%;
    }
    #featured .twoColumns .thumbnail img {
        width: 100%;
    }
    .page-area{
        background-attachment: scroll;
    }
    .vg-section-image{
        background-attachment: scroll !important;
    }
    .page-area .title {
        margin-bottom: 10%;
    }
    .page-area .title h1 {
        font-size: 2.2em;
    }
    .page-area .title p {
        font-size: 1em;
    }
    .config .item {
        height: auto;
        overflow: hidden;
        margin-bottom: 5%;
    }
    .config .item .thumbnail {
        width: 70%;
        margin-bottom: 5%;
    }
    .config .item h2 {
        font-size: 1.25em;
    }
    .portfolios .portfolio-item {
        height: 18em;
        clear: both;
        margin-bottom: 10px;
    }
    .portfolios.columns4 .portfolio-item, .portfolios.columns5 .portfolio-item {
        width: 100%;
    }
    blockquote.quote-type {
        width: 85%;
        text-align: center;
    }
    blockquote.quote-type img {
        float: none;
    }
    .pricetable .plan {
        width: 100%;
        margin-bottom: 3%;
    }
    .member {
        width: 43%;
        margin: 0 3% 5% 0;
    }
    .contactform {
        width: 97%;
    }
    .contactinfo {
        width: 100%;
    }
    .contactform {
        margin-bottom: 10%;
    }
    #footer .footer-l, #footer .footer-r {
        clear: both;
        width: 100%;
    }
    #footer .footer-l {
        margin-bottom: 2%;
    }
    #commentform dd textarea {
        width: 103.5%;
    }
    .commentlist li .avatar, .single .post figure {
        display: none;
    }
    .tax {
        height: auto;
        overflow: hidden;
        margin-bottom: 10px;
    }
    .tax ul {
        border: none;
    }
    .tax ul li {
        min-width: 8%;
        background: #333;
        margin: 0 5px 0 0;
    }
    .tax ul li a {
        font-size: 0.875em;
        padding: 8px 5px;
        color: #fff;
        text-transform: capitalize;
    }
    .inverse.tax ul li {
        background: #000;
    }
    .post figure {
        display: none;
    }
    .post .thumbnail {
        width: 100px;
        height: 100px;
    }
    .post .thumbnail img {
        width: 100px;
    }
    .entry iframe{
        height:300px;
    }
}
/* Responsive Layout*/
@media only screen and (max-width: 480px) {
    #mobileMenu{ display:none !important; }
    .css3-selectbox{ display:block !important; width:100% !important; float:none; padding-top:15px; }
    .home  .vg-TopHeight{
        height: 520px;
    }
    #mobile-menu, #mobile-menu span {
        clear: both;
        width: 96.8%;
        text-align: center;
        background-position: 95% center;
    }
    #mobile-menu, #mobile-menu ul {
        width: 100%;
    }
    #featured .slide_content {
        text-align: center;
        margin-top: 120px;
    }
    #featured .twoColumns .thumbnail {
        display: none;
    }
    #featured .oneColumn #secondTitle {
        margin-top: -1em;
    }
    #featured .oneColumn #excerpt, #featured .twoColumns #excerpt {
        width: 97%;
    }
    .config .item, config .item .thumbnail {
        width: 100%;
    }
    .config .item {
        width: 89%;
        margin-bottom: 2%;
    }
    .portfolios .portfolio-item {
        width: 92%;
        height: 21em;
        margin-bottom: 10px;
    }
    .member {
        width: 90%;
        margin: 0 3% 15% 0;
    }
    #commentform dd {
        width: 96%;
        margin-left: 0
    }
    #commentform dt {
        margin-bottom: 2%;
    }
    #commentform dd input, #commentform dd textarea {
        width: 100%;
    }
    #commentform dd button {
        margin-top: -8%;
    }
    .post figure, .post .thumbnail {
        display: none;
    }
}
/* Responsive Layout*/
@media only screen and (max-width: 320px) {
    #mobileMenu{ display:none !important; }
    .css3-selectbox{ display:block !important; }
    .home  .vg-TopHeight{
        height: 480px;
    }
    #featured .oneColumn #firstTitle, #featured .twoColumn #firstTitle {
        font-size: 3.5em;
        margin-bottom: 0;
    }
    #featured .oneColumn #secondTitle, #featured .twoColumn #secondTitle {
        font-size: 1.8em;
    }
    #featured .twoColumns .thumbnail {
        display: none;
    }
    #featured #excerpt {
        font-size: 0.9em;
    }
    .config .item {
        margin-bottom: 10%;
    }
    .contactform {
        width: 94%;
    }
    .subscribe .subscribe-input {
        width: 53.5%;
    }
    #commentform dd {
        width: 92%;
    }
    #commentform dd button {
        margin-top: -12%;
    }
}
/* Custom mobile menu and slider fix */
@media only screen and (max-width: 640px) {
    .home #top {
        background: #ffffff !important;
        overflow: visible !important;
    }

    #primary-menu {
        padding: 8px 10px !important;
        background: #2f6ea5 !important;
        /* above the slider arrows (z-index 10) so the open menu covers them */
        z-index: 100 !important;
    }

    #primary-menu .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #site-logo,
    #primary-menu-container,
    .css3-selectbox,
    .select-menu {
        display: none !important;
    }

    #mobileMenu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #mobileMenuToggle {
        width: auto !important;
        min-width: 46px !important;
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 13px !important;
        background: transparent !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.65) !important;
        border-radius: 3px !important;
        font-size: 0 !important;
        float: right !important;
    }

    #mobileMenuToggle .hamburger-icon {
        margin: 0 !important;
        font-size: 26px !important;
        color: #ffffff !important;
    }

    #mobileMenuDropdown {
        display: none;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-top: 3px solid #2f6ea5 !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }

    #mobileMenuDropdown ul,
    #mobileMenuDropdown li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #mobileMenuDropdown li {
        border-bottom: 1px solid #eef1f4 !important;
    }

    #mobileMenuDropdown li:last-child {
        border-bottom: none !important;
    }

    #mobileMenuDropdown a {
        display: block !important;
        padding: 13px 20px !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: #2f6ea5 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .home .vg-TopHeight {
        height: auto !important;
        min-height: 0 !important;
    }

    #featured {
        position: relative !important;
        width: 100% !important;
        height: 76vh !important;
        min-height: 520px !important;
        max-height: 700px !important;
        top: auto !important;
        left: auto !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    #featured .flex-viewport,
    #featured .slides,
    #featured .slides li {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    #featured .slides li {
        position: relative !important;
        overflow: hidden !important;
    }

    #featured .slides li p {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #featured .slides li p img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        object-fit: cover !important;
        object-position: 22% center !important;
    }

    #featured .slide_content {
        display: none !important;
    }

    /* Gallery: replace the cramped Creative Image Slider strips with a
       native swipeable photo strip (built by JS in index.php) */
    .cis_main_wrapper_canvas {
        display: none !important;
    }

    .vg-mobile-gallery {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 4px 10px 8px;
        scrollbar-width: none;
    }

    .vg-mobile-gallery::-webkit-scrollbar {
        display: none;
    }

    .vg-mobile-gallery figure {
        flex: 0 0 84%;
        scroll-snap-align: center;
        margin: 0;
    }

    .vg-mobile-gallery img {
        display: block;
        width: 100%;
        height: 230px;
        object-fit: cover;
        border-radius: 8px;
    }

    .vg-mobile-gallery figcaption {
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #555555;
        text-align: center;
        padding-top: 7px;
    }
}
/* Mobile-only gallery strip stays hidden on larger screens */
@media only screen and (min-width: 641px) {
    .vg-mobile-gallery {
        display: none !important;
    }
}
/* Responsive Layout*/
@media only screen and (max-width: 480px) {
    #featured {
        height: 74vh !important;
        min-height: 500px !important;
    }

    #featured .slides li p img {
        object-position: 18% center !important;
    }
}