/*
WIWET.com - ASP.NET Templates
Template Name: LemCon2021
*/

@media only screen and (max-width : 1280px) {
	/* Homepage testimonials */
	.section-testimonials .carousel-control.left {
	    left: -25px;
	}
	.section-testimonials .carousel-control.right {
	    right: -25px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	/* Logo */
	.branding {
	    margin: 28px 0;
	}
	.site-logo img {
		width: 90%;
		vertical-align:top;
		text-align:left;
	}

	/* Navigation */
	.wiwet-navigation-link {
		font-size: 13px;
		padding: 0 8px 10px;
	}

	/* Slideshow */
	#wiwet-slideshow .carousel-caption {
		padding: 15px 50px;
		font-size: 32px;
	}

	/* Portfolio */
	.portfolio-item {
		height: 220px;
	}

	/* Contact page */
	.contact-widget-title {
		font-size: 18px;
		padding: 15px 10px;
	}
	.contact-widget-content {
		font-size: 16px;
		padding: 20px 10px;
	}
}

@media only screen and (min-width : 992px) and (max-width: 1199px) {
	/* Footer */
	.footer-portfolio li {
		margin: 5px 5px 0 0;
	}
}

@media only screen and (min-width : 992px) {
	/* Portfolio */
	.portfolio-item:nth-child(4n+1) {
	    padding-left: 0;
	}
	.portfolio-item:nth-child(4n+4) {
	    padding-right: 0;
	}
	.portfolio-item:nth-child(-n+4) {
	    padding-top: 0;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
	.sm-xs-center {
		text-align: center;
	}

	/* Social icons */
	.social-icons li:last-child {
		padding-right: 0;
	}
	
	/* Search */
	.search-group.pull-right {
		float: none !important;
		clear: both;
		margin: 20px auto 0;
	}

	/* Logo */
	.branding.pull-left {
		float: none;
		text-align: center;
		width: 100%;
		margin: 25px 0;
	}
	.site-logo {
		display: inline-block;
	}
	.site-logo img {
		width: auto;
		max-width: 100%;
	}

	/* Navigation */
	.wiwet-navigation-li {
		line-height: 1;
	}

	/* Blog */
	.sidebar.col-md-4 {
	    padding-left: 15px;
	    margin-top: 50px;
	}

	/* Contact */
	.contact-widget {
		margin-top: 50px;
	}
	
	/* Elements */
	.wiwet-tabs .nav-tabs > li > a {
		margin-right: 5px;
		padding: 8px;
	}
}

@media only screen and (min-width : 768px) and (max-width : 991px) {
	/* Main */
	.wiwet-main > section {
	    padding-bottom: 40px;
	}
	.section-title-centered {
		font-size: 34px;
	}
	.section-title {
		font-size: 28px;
	}

	/* Slideshow */
	#wiwet-slideshow {
		height: 440px;
	}

	#wiwet-slideshow .carousel-caption {
		font-size: 28px;
	}
	
	/* Homepage services */
	.service-box-blue h3 {
		font-size: 20px;
	}

	/* Portfolio */
	.portfolio-item:nth-child(3n+1) {
	    padding-left: 0;
	}
	.portfolio-item:nth-child(3n+3) {
	    padding-right: 0;
	}
	.portfolio-item:nth-child(-n+3) {
	    padding-top: 0;
	}
	
	/* Footer */
	.footer-info {
		margin-top: 50px;
	}

	/* Contact */
	.contact-widget-title {
		font-size: 20px;
		padding: 15px 15px 15px 20px;
	}
	.contact-widget-content {
		padding: 20px;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
	/* Top Header */
	.top-header__email,
	.top-header__phone,
	.top-header__remote 
	{
		font-size: 18px;
		line-height: 26px;
	}
	.top-header__email {
		margin-right: 0;
	}
	.top-header__email .fa, 
	.top-header__phone .fa {
		margin-right: 3px;
	}
	.top-header__phone.pull-left {
		float: right !important;
	}
	
	/* Social icons */
	.social-icons.pull-right {
		float: left !important;
		clear: both;
		margin: 10px 0 0;
	}

	/* Search */
	.search-group.pull-right {
		clear: none;	
		margin: 10px 0 0;
		float: right !important;
		width: auto;
	}
	.search-group::before {
		display: none;
	}
	.search-group .form-control {
		display: none;
	}

	/* Logo */
	.branding.pull-left {
		text-align: left;
		width: auto;
		margin: 20px 0;
	}
	.site-logo img {
		width: 220px;
	}
	.site-caption {
		font-size: 11px;
	}

	/* Header */
	.wiwet-main-header {
		min-height: 0;
	}
	
	/* Navigation */
	.wiwet-navigation {
		
		min-height: 0;
		position: absolute;
		left: 0;
		width: 100%;
	}
	.wiwet-navigation-ul {
		display:block;
		overflow: hidden;
    	padding: 15px 0;
	}
	.wiwet-navigation-li {
		
		width: 100%;
		line-height: 22px;	
		padding: 0 20px;
		position: relative;
	}
	.wiwet-navigation-li:before {
		content: "";
		background: url('../Images/menu-list-arrow.png') no-repeat center left;
		height: 6px;
	    left: 20px;
	    position: absolute;
	    top: 19px;
	    width: 5px;
	    z-index: 222;
	}
	.wiwet-navigation-li + .wiwet-navigation-li {
		margin-left: 0;
	}
	.wiwet-navigation-link {
		font-size: 16px;
		border: 0 none;
		padding: 0;
		color: #fff;
		display: block;
		padding: 10px 0 10px 20px;
		border-top: 1px solid #383838;
	}
	.wiwet-navigation-li:first-child .wiwet-navigation-link {
		
		border-top: 0 none;
	}
	.wiwet-navigation-link.active {
		font-size:20px;
		color: #36a7ed;
		border: 0 none;
	}
	.wiwet-navigation .navbar-header {
		
		position: relative;
		right: 15px;
		top: 21px;
	}
	.navbar-toggle {
		display: block;
		background-color: #000066;
		border-radius: 0;
		padding: 8px;
		margin: 0;
	}	
	.navbar-toggle .icon-bar {
		background-color: #fff;
		height: 3px;
    	width: 28px;
	}
	.navbar-collapse {
		background-color: #000066;
		position: absolute;
	    top: 56px;
	    z-index: 9;
	}

	/* Slideshow */
	#wiwet-slideshow {
		height: 130px
	}
	#wiwet-slideshow .carousel-control {
		width: 26px;
		height: 26px;
		font-size: 18px;
		margin-top: -13px;
		border-radius: 3px;
	}
	#wiwet-slideshow .carousel-control.left {
		left: 10px;
	}
	#wiwet-slideshow .carousel-control.right {
		right: 10px;
	}

	/* Main */
	.wiwet-main > section {
		padding-bottom: 40px;
	}
	.section-title-centered {
		margin-bottom: 20px;
		font-size: 34px;
		line-height: 36px;
	}
	.section-title {
		font-size: 28px;
	}

	/* Homepage services */
	.section-services-homepage {
		top: auto;
	}	
	.section-services-homepage .row .col-sm-4:first-child {
	    padding-left: 0;
	}
	.section-services-homepage .row .col-sm-4:last-child {
	    padding-right: 0;
	}
	.service-box-blue {
		padding: 30px;
		margin-bottom: 2px;
	}
	.service-box-blue h3 {
		margin-top: 30px;
	}

	/* Homepage about */
	.section-about {
		padding-top: 20px;
	}
	.section-about p {
		font-size:16px;
		line-height: 24px;
	}
	.section-service {
		padding-top: 20px;
	}
	.section-service p {
		font-size:16px;
		line-height: 24px;
		text-align:left;
	}
	.carousel-caption {
		display: none;
	}

	/* Portfolio */
	.portfolio-item.col-xs-6 {
		padding: 0;
		margin-bottom: 2px;
	}

	/* Latest posts */
	.latest-post-item + .latest-post-item {
		margin-top: 25px;
	}
	.latest-post-item h3 {
		margin: 10px 0;
	}
	.latest-post-item .read-more-btn {
		font-size: 13px;
	    padding: 6px 20px;
	    margin-top: 0;
	}

	/* Testiomonials */
	.testimonial-thumb {
		float: none;
    	text-align: center;
	}
	.testimonial-content {
	    margin-top: 20px;
	    padding-left: 0;
	    text-align: center;
	}
	.section-testimonials .carousel-control.left {
		left: 35px;
	}
	.section-testimonials .carousel-control.right {
		right: 35px;
	}

	/* Footer */
	.footer-widgets {
		padding: 20px 0;
	}
	.footer-col + .footer-col {
		margin-top: 40px;
	}
	.footer-list {
		font-size: 16px;
		margin-top: 15px;
	}
	.footer-portfolio li {
		margin: 5px 5px 0 0;
	}
	.footer-copyright {
		padding: 10px 0;
		line-height: 18px;
	}

	/* Services */
	.service-box,
	.service-box.mt30 {
		margin-top: 15px;
	}
	.service-box p
	{
		font-size:18px;
	}
	/* Blog */
	.entry-title {
		font-size: 20px;
	}
	.entry-content {
		top: auto;
		margin-top: 10px;
	}
	.single-post + .single-post {
		margin-top: 25px;
		padding-top: 25px;
	}
	.widget + .widget {
		margin-top: 10px;
	}

	/* Contact */
	.contact-form .col-sm-6:first-child {
	    padding-right: 15px;
	}
	.contact-form .col-sm-6:last-child {
	    padding-left: 15px;
	}
	
	/* Elements */
	.buttons-list a {
		margin-bottom: 15px;
	}

	.buttons-list a:last-child {
		margin-bottom: 0;
	}
	
	.wiwet-tabs .nav-tabs > li > a {
		padding: 10px;
		font-size: 13px;
		margin-right: 3px;
	}
	
	.wiwet-accordion {
		margin-top: 50px;
	}
	
	.mt30-mobile {
		margin-top: 30px;
	}
	.widget-content ul {
		margin: 0;
		padding: 20px 0 20px 15px;
		list-style: circle;
	}

	.widget-content li {
		font-size: 16px;
		position: relative;
		padding-left: 20px;
		line-height: 24px;
	}

	.widget-content ul li + li {
		font-size: 16px;
		margin-top: 15px;
	}

	.widget-content ul li:before {
		content: "";
		background: url('../Images/sidebar-arrow.png') no-repeat center left;
		height: 7px;
		left: 0;
		position: absolute;
		top: 4px;
		width: 7px;
		z-index: 222;
	}

	.widget-content ul li a {
		color: #000;
	}

	.widget-content ul li a:hover {
		color: #36a8eb;
	}
}


/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 479px) {
	/* Portfolio */
	.portfolio-item.col-xs-6 {
		width: 100%;
	}
}
/* ============================================================================
   Mobile usability improvements
   ----------------------------------------------------------------------------
   Addresses two Google mobile-usability signals that also affect real usability:
     1. Tap targets  - Google expects roughly 48x48px with 8px spacing. Hit areas
                       are enlarged with padding so the icons themselves can stay
                       the same visual size.
     2. Text size    - body copy raised to 16px. 16px on form fields additionally
                       stops iOS Safari zooming the page when a field is focused.
   Appended last so these rules win over the earlier breakpoints.
   ========================================================================= */
@media only screen and (max-width: 767px) {

    /* ---- fields shown on desktop but hidden on phones ----
       Job Title and the address block add noticeable friction on a small screen,
       so they are hidden below 768px. The inputs remain in the DOM and still post
       (empty) values, so the server-side handling is unchanged. ---- */
    .desktop-only-field {
        display: none !important;
    }
    /* ---- readable body text ---- */
    body,
    p,
    li,
    td,
    .widget-content,
    .widget-content ul li,
    .entry-content,
    .section-about-text,
    .local-areas-text {
        font-size: 16px;
        line-height: 1.6;
    }

    .hint,
    .copyright,
    small {
        font-size: 14px;
    }

    /* ---- form fields: 16px prevents iOS zoom-on-focus ---- */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
        min-height: 46px;
        padding: 10px 12px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    /* ---- primary actions ---- */
    .btn-submit,
    .btn-newsletter,
    .nl-submit,
    input[type="submit"],
    button[type="submit"] {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 22px;
    }

    /* ---- social icons: small glyph, large hit area ---- */
    .social-icons li {
        margin: 0 2px;
    }

    .social-icons .social-icon-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* ---- top bar utility links ---- */
    .wiwet-top-header a,
    .top-header__email,
    .top-header__phone,
    .top-header__remote {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 6px;
    }

    /* ---- search box ---- */
    .search-group .search-control {
        min-height: 44px;
    }

    .search-group .btn-search {
        min-width: 44px;
        min-height: 44px;
    }

    /* ---- navigation toggle ---- */
    .navbar-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 12px 10px;
    }

    .wiwet-navigation-li .wiwet-navigation-link {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    /* ---- carousel controls ---- */
    #wiwet-slideshow .carousel-control {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        font-size: 22px;
        line-height: 44px;
    }

    /* ---- footer links get room to be tapped ---- */
    .footer-menu li {
        margin-bottom: 6px;
    }

    .footer-menu li a {
        display: inline-block;
        min-height: 40px;
        line-height: 1.5;
        padding: 8px 0;
        font-size: 16px;
    }

    /* ---- blog / listing links ---- */
    .entry-title a,
    .entry-read-more {
        display: inline-block;
        min-height: 44px;
        line-height: 1.5;
        padding: 8px 0;
    }
}
/* ============================================================================
   Mobile navigation tree + hero
   ----------------------------------------------------------------------------
   The mobile menu previously exposed only 6 links while the desktop menu had
   ~40, so service, office, and FAQ pages were unreachable on a phone. The
   markup in Header.ascx now mirrors the desktop structure; these rules make it
   an expanding tree. The hero rules restore the headline, which the earlier
   breakpoint hid entirely on small screens.
   ========================================================================= */
@media only screen and (max-width: 767px) {

    /* ---- expanding sub-menus ---- */
    .wiwet-navigation-li.mnav-has-sub {
        padding-right: 56px;
    }

    .mnav-toggle {
        position: absolute;
        top: 0;
        right: 4px;
        width: 52px;
        height: 48px;
        padding: 0;
        /* a divider makes the chevron read as its own control */
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.08);
        /* must be light: the panel behind is dark navy (#000066) */
        color: #fff;
        font-size: 22px;
        line-height: 48px;
        cursor: pointer;
        border-radius: 3px;
    }

    .mnav-toggle .fa {
        display: inline-block;
        transition: transform .15s ease;
    }

    /* make it obvious the row does something even before it is tapped */
    .wiwet-navigation-li.mnav-has-sub > .wiwet-navigation-link {
        position: relative;
    }

    .mnav-has-sub.mnav-open > .mnav-toggle {
        background: rgba(255, 255, 255, 0.20);
    }

    .mnav-has-sub.mnav-open > .mnav-toggle .fa {
        transform: rotate(180deg);
    }

    /* highlight the whole open row so the current section is obvious */
    .mnav-has-sub.mnav-open > .wiwet-navigation-link {
        color: #36a7ed;
    }

    .mnav-sub {
        display: none;
        list-style: none;
        margin: 0 0 6px;
        padding: 4px 0 4px 14px;
        border-left: 2px solid rgba(255, 255, 255, 0.25);
    }

    .mnav-has-sub.mnav-open > .mnav-sub {
        display: block;
    }

    .mnav-sub li a {
        display: block;
        min-height: 46px;
        line-height: 1.4;
        padding: 12px 4px;
        font-size: 16px;
        /* the mobile nav panel is dark navy (#000066), so these must be light */
        color: #fff;
    }

    .mnav-sub li a:hover,
    .mnav-sub li a:focus {
        color: #36a7ed;
    }

    /* group headings inside the Services list */
    .mnav-sub .mnav-group {
        margin: 12px 0 3px;
        padding: 0 4px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #b3bce0;
    }

    /* keep a long menu usable on a short screen */
    #primary-navigation {
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- hero: give it height and put the headline back ---- */
    #wiwet-slideshow {
        height: 240px;
    }

    #wiwet-slideshow .carousel-caption {
        display: block;
        position: absolute;
        left: 50%;
        right: auto;
        bottom: 22px;
        width: 88%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        padding: 10px 14px;
        font-size: 18px;
        line-height: 1.3;
        border-width: 2px;
        background: rgba(150, 150, 150, 0.82);
    }
}

@media only screen and (max-width: 479px) {

    #wiwet-slideshow {
        height: 200px;
    }

    #wiwet-slideshow .carousel-caption {
        font-size: 16px;
        bottom: 16px;
        padding: 9px 12px;
    }
}
/* ============================================================================
   Mobile hero images
   ----------------------------------------------------------------------------
   The full-size slideshow images are ~1435px wide but the hero renders at
   200-240px tall on a phone, so phones were downloading roughly 456 KB more
   than they could ever display. These 800px-wide versions still cover a 375px
   viewport at 2x device pixel ratio.
   ========================================================================= */
@media only screen and (max-width: 767px) {

    #wiwet-slideshow .carousel-inner > .item-1 {
        background-image: url(../Images/slideshow-img-1-mobile.jpg);
    }

    #wiwet-slideshow .carousel-inner > .item-2 {
        background-image: url(../Images/slideshow-img-2-mobile.jpg);
    }

    #wiwet-slideshow .carousel-inner > .item-3 {
        background-image: url(../Images/slideshow-img-3-mobile.jpg);
    }
}