/* =Responsive (Mobile) Design
-------------------------------------------------------------- */

@media screen and (max-width: 980px) {
	body {
	}

	.grid,
	.grid-right {
		display: block;
		float: none;
		width: 100%;
		margin-right: 0;
	}

	.copyright,
	.scroll-top,
	.powered {
		float: left;
	}

	#featured-image .fluid-width-video-wrapper {
		margin: 20px 0 0 0;
	}

	.front-page  #widgets {
		margin-top: 40px;
	}

	.top-widget,
	.front-page  .top-widget {
		margin-top: 0 !important;
	}

	.hide-desktop {
		display: block;
	}

	.show-desktop {
		display: none;
	}

	.hide-980 {
		display: none;
	}

	.show-980 {
		display: block;
	}

    /*** EXCELLIFE ***/

    /*** Products ***/

    .fill-960 {
        width: 100% !important;
    }

    .responsive-font {
        line-height: normal;
    }

    .responsive-font h1,
    .responsive-font h2,
    .responsive-font h3,
    .responsive-font h4,
    .responsive-font h5,
    .responsive-font h6 {
        line-height: normal;
    }

    .grey-header h1 {
        font-size: 214%;
    }

    .grey-header p {
        background-size: 10% auto;
        padding-bottom: 8%;
    }

    .grey-header input[type="text"] {
        width: 55%;
    }

    .grey-header button {
        width: 30%;
        height: auto;
        font-size: 100%;
    }

    /*** Products ***/

    .post-type-archive-products [id^="post-"] {
        width: 100%;
        overflow: hidden;
    }

    .post-type-archive-products .thumb-wrap {
        width: 100%;
        height: auto;
        margin: 0;
        text-align: center;
    }

    .post-type-archive-products .wp-post-image {
        width: 60%;
        height: auto;
        margin: 0;
        float: none;
    }

    .post-type-archive-products .post-main {
        width: 90%;
        margin-left: 5%;
    }

    .entry-product-datasheet {
        width: 100%;
        height: auto;
        background-size: 12% auto;
        padding: 3% 0 7% 20%;
        font-size: 115%;
    }

    .entry-product-environmental-profile {
        width: 100%;
        height: auto;
        background-size: 12% auto;
        padding: 3% 0 7% 20%;
        font-size: 115%;
    }

    .entry-product-installation-instructions {
        width: 100%;
        height: auto;
        background-size: 12% auto;
        padding: 3% 0 7% 20%;
        font-size: 115%;
    }

    .entry-circuit-id-template {
        width: 100%;
        height: auto;
        background-size: 12% auto;
        padding: 3% 0 7% 20%;
        font-size: 115%;
    }

    #footer {
        text-align: left;
        max-width: none;
    }

    #footer .field-wrap {
        width: 100%;
    }

    #footer input[type="text"],
    #footer input[type="email"] {
        width: 100%;
        padding: 3.5%;
    }

    #footer input[type="submit"] {
        width: 100%;
        height: auto;
        padding: 8%;
        font-size: 100%;
        float: right;
    }

    #footer .submit-wrap {
        width: 40%;
        float: right;
    }

    #footer .checkbox-wrap {
        width: auto;
        float: left;
    }

    #logo {
        display: none;
    }

    #logo-2 {
        display: block;
        margin: 20px 20px 15px;
        width: 100px;
        height: auto;
        font-size: 14px;
    }


    /*** Responsive Menu ***/

    #header {
        overflow: hidden;
    }

    #menu-header-menu {
        float: none;
        width: 100%;
        font-size: 150%;
        z-index: 0;
        display: none;
    }

    #menu-header-menu.expanded {
        display: block;
    }

    #menu-header-menu a {
        font-size: 80%;
        text-align: center;
        margin: 0;
        padding: 2.5% 0;
        z-index: 0;
    }

    #menu-header-menu li {
        display: block;
        width: 100%;
        z-index: 100;
    }

    #menu-header-menu li:nth-child(odd) a {
        background: #263a4a;
    }

    #menu-header-menu li:nth-child(even) a {
        background: #2e4659;
    }

    #menu-header-menu li,
    #menu-header-menu li.current-menu-item:not(:hover),
    #menu-header-menu li:not(:hover) {
        position: relative;
        border: none;
        color: white;
        text-shadow: none;
        z-index: 0;
    }

    #menu-header-menu li a,
    #menu-header-menu li.current-menu-item:not(:hover) a,
    #menu-header-menu li:not(:hover) a {
        position: relative;
        border: none;
        color: white;
        text-shadow: none;
        z-index: 0;
    }

    #menu-header-menu:hover li:hover,
    #menu-header-menu:hover li.current-menu-item:hover,
    #menu-header-menu:not(:hover) li.current-menu-item {
        position: relative;
        border: none;
        background: #ff841f;
        color: white;
        text-shadow: none;
        z-index: 100;
    }

    #menu-header-menu:hover li:hover a,
    #menu-header-menu:hover li.current-menu-item:hover a,
    #menu-header-menu:not(:hover) li.current-menu-item a {
        position: relative;
        border: none;
        background: #ff841f;
        color: white;
        text-shadow: none;
        z-index: 100;
    }

    .menu-overlay {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(../../images/menu-glow.png) top center no-repeat;
        background-size: cover;
        opacity: 0.8;
        mix-blend-mode: overlay;
        pointer-events: none;
        z-index: 50;
    }

    #header:hover .menu-overlay {
        z-index: 49;
    }

    .menu-hamburger {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        background: url(../../images/menu-hamburger.png) center center no-repeat;
        background-size: 50%;
        z-index: 200;
        cursor: pointer;
    }

    .menu-hamburger.expanded {
        background: url(../../images/menu-close.png) center center no-repeat;
    }

    /*** Reps ***/

    .post-type-archive-reps #main {
        padding: 0 0 0 5%;
    }

    .post-type-archive-reps [id^="post-"] {
        width: 95%;
        padding: 0 0 5% 0;
        margin: 0;
    }

    .post-type-archive-reps [id^="post-"]:nth-child(odd) {
        margin-right: 0;
    }

    /*** Contact Us ***/
    .page-contact-us .location-main {
        width: 100%;
    }

    .page-contact-us .location-main p,
    .page-contact-us .location-main h3 {
        font-size: 129%;
    }

    .page-contact-us .location-details {
        width: auto;
        max-width: 70%;
        padding-left: 5%;
        margin-top: 4%;
    }

    .location-details .location-address,
    .location-details .location-operation-hours,
    .location-details .location-reach-us {
        background-size: 10%;
        padding-left: 15%;
    }

    .location-form {
        width: 99%;
        border-left: none;
        font-size: 129%;
        padding-left: 0;
    }

    .location-form input,
    .location-form textarea {
        width: 100%;
    }

    .location-form .contact-form-inner {
        border-top: 1px solid #2e4659;
        padding-top: 10%;
    }

    .accordion-title {
        position: relative;
        background: #ff841f;
        color: white;
        margin-top: 1.5%;
        cursor: pointer;
        font-family: dinregular, sans-serif;
    }

    .accordion-title::before {
        position: absolute;
        display: block;
        content: '';
        top: 0;
        left: 50%;
        margin-left: -36px;
        border-top: 18px solid white;
        border-right: 36px solid transparent;
        border-bottom: none;
        border-left: 36px solid transparent;
    }

    .accordion-title h2 {
        margin: 0;
        padding: 36px 0;
        font-size: 200%;
        text-transform: uppercase;
        text-align: center;
    }

    .accordion-title {
        display: block;
    }

    .location-title {
        display: none;
    }

    #main-location-map {
        display: none;
    }

    /*** Videos ***/

    .post-type-archive-videos #main {
        width: 100%;
        margin: 0;
    }

    .post-type-archive-videos #video-description {
        width: 90%;
        margin-left: 5%;
    }

    .post-type-archive-videos .item {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .post-type-archive-videos .item .thumb {
        width: 40%;
        height: auto;
        vertical-align: middle;
        margin: 3% 5%;
    }

    .post-type-archive-videos .item h3 {
        font-size: 100%;
        display: inline-block;
        margin: 0;
        vertical-align: middle;
        max-width: 45%;
        height: auto;
    }

    .post-type-archive-videos .video-lower {
        margin-bottom: 5%;
        max-width: none;
    }

    .post-type-archive-videos #wrapper::after {
        content: none;
    }

    /*::after {*/
        /*content: '';*/
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        /*width: 100%;*/
        /*height: 375px;*/
        /*background: #e8ebed;*/
    /*}*/


    /*** Home Page ***/

    #featured {
        position: relative;
    }

    #featured #featured-image {
        margin: 0;
    }

    .look-up-product {
        position: relative;
        float: none;
        margin: 0;
        width: 100%;
    }

    .look-up-product .top {
        font-size: 129%;
        padding: 5% 0;
    }

    .look-up-product .lookup {
        padding: 5% 4%;
    }

    .look-up-product .lookup input[type="text"] {
        font-size: 85.7%;
        width: 100%;
        height: auto;
        padding: 2.2% 2% 2.2% 8%;
    }

    .look-up-product .lookup button {
        font-size: 100%;
        padding: 2% 2% 2% 8%;
        width: 40%;
        margin-left: 30%;
        height: auto;
        background-size: auto 60%;
    }

    .look-up-product fieldset legend {
        font-weight: bold;
        padding: 0;
        margin-bottom: 5px;
    }

    fieldset.filters input[type="checkbox"] {
        vertical-align: middle;
    }

    #featured-content {
        text-align: center;
        background: url(../../images/hero_home_mobile.jpg) center top no-repeat;
        background-size: cover;
        padding-bottom: 60%;
    }

    #featured-content p {
        text-align: center;
        width: auto;
    }

    #featured-content .white-logo {
        width: 40%;
        height: auto;
        margin-left: -20%;
        padding-top: 10%;
    }

    #featured-content .super-job {
        width: 95%;
        margin: 0 0 0 -5%;
    }

    #featured p {
        font-size: 115%;
        line-height: normal;
        padding: 0 5%;
    }

    #featured {
        width: 100%;
        padding: 0;
        height: auto;
    }

    #top-feature {
        height: auto;
    }

    body.home {
        background: none;
    }

    .home .top-bar {
        background: #2f4960;
        background: -moz-linear-gradient(left, #2f4960 0%, #203241 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2f4960), color-stop(100%,#203241));
        background: -webkit-linear-gradient(left, #2f4960 0%,#203241 100%);
        background: -o-linear-gradient(left, #2f4960 0%,#203241 100%);
        background: -ms-linear-gradient(left, #2f4960 0%,#203241 100%);
        background: linear-gradient(to right, #2f4960 0%,#203241 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f4960', endColorstr='#203241',GradientType=1 );
    }

    #all-features {
        background: white;
    }

    .feature .video-carousel {
        position: relative;
        width: 92%;
        padding: 4%;
        left: auto;
        top: auto;
    }

    .feature-right {
        position: relative;
        left: auto;
        max-width: none;
        width: 100%;
        background: white;
        padding: 4% 0;
        font-size: 114.2%;
    }

    #fast-install .feature-right h2 {
        display: none;
    }

    #fast-install .shunt {
        padding-bottom: 0;
    }

    #fast-install .fast-install {
        width: 100%;
        position: relative;
        left: auto;
        top: auto;
    }

    #fastest-usb .video-carousel {
        left: auto;
        top: auto;
    }

    .feature-left {
        position: relative;
        left: auto;
        max-width: none;
        width: 100%;
        background: white;
        padding: 4% 0;
        font-size: 114.2%;
    }

    .feature-right p,
    .feature-left p {
        padding-left: 4%;
    }

    #fastest-usb .awards-mobile {
        width: 86%;
        padding: 7%;
    }

    #super-smooth .feature-right {
        max-width: 100%;
        width: 100%;
        top: auto;
    }

    #tech-touches .video-carousel {
        left: auto;
        top: auto;
    }

    #tech-touches .feature-left {
        max-width: 100%;
        width: 100%;
        top: auto;
    }

    #plate-formats .feature-left {
        max-width: 100%;
    }

    #colour-choices .feature-right {
        max-width: 100%;
        right: auto;
        left: auto;
    }

    #colour-choices .feature-right p {
        float: none;
        text-align: left;
        max-width: 88%;
    }

    #award-winning .feature-right {
        left: auto;
        max-width: 100%;
        width: 100%;
    }

    #award-winning .feature-right p {
        max-width: 87%;
    }

    img {
        width: 100%;
    }

    #award-winning img.good-design {
        position: relative;
        width: 30%;
        left: auto;
        top: auto;
        margin: 8%;
    }

    .downloads {
        padding: 7% 0;
    }

    .downloads a {
        width: 70%;
        overflow: hidden;
    }

    .downloads .pdf {
        width: 20%;
        height: 0;
        padding-bottom: 23.8%;
        background-size: contain;
    }

    #footer #ninja_forms_form_5_response_msg {
        left: 0;
        top: 90%;
        max-width: 60%;
    }

    #footer {
        padding-bottom: 10%;
    }

    .feature.tab-content {
        display: none;
    }

    .feature.tab-content.active {
        display: block;
    }

    .navigation.pagination {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0 0 7%;
        margin: 0 auto;
    }

    .pagination-wrap {
        padding: 5% 0 7%;
        background: #e7ebee;
        height: auto;
    }

    .pagination .page-numbers {
        width: 8%;
        margin: 0.3%;
    }

    .pagination .next,
    .pagination .prev {
        width: auto;
    }

    .home .accordion-title h2 {
        text-align: left;
        margin-left: 4%;
    }
    .downloads {
        background: #172938;
    }

    #fastest-usb::before {
        content: none;
    }

}

@media all and (min-width: 938px) and (max-width: 980px) { .responsive-font { font-size: 36px; } }
@media all and (min-width: 915px) and (max-width: 938px) { .responsive-font { font-size: 35px; } }
@media all and (min-width: 892px) and (max-width: 915px) { .responsive-font { font-size: 34px; } }
@media all and (min-width: 869px) and (max-width: 892px) { .responsive-font { font-size: 33px; } }
@media all and (min-width: 846px) and (max-width: 869px) { .responsive-font { font-size: 32px; } }
@media all and (min-width: 823px) and (max-width: 846px) { .responsive-font { font-size: 31px; } }
@media all and (min-width: 800px) and (max-width: 823px) { .responsive-font { font-size: 30px; } }
@media all and (min-width: 777px) and (max-width: 800px) { .responsive-font { font-size: 29px; } }
@media all and (min-width: 754px) and (max-width: 777px) { .responsive-font { font-size: 28px; } }
@media all and (min-width: 731px) and (max-width: 754px) { .responsive-font { font-size: 27px; } }
@media all and (min-width: 708px) and (max-width: 731px) { .responsive-font { font-size: 26px; } }
@media all and (min-width: 685px) and (max-width: 708px) { .responsive-font { font-size: 25px; } }
@media all and (min-width: 662px) and (max-width: 685px) { .responsive-font { font-size: 24px; } }
@media all and (min-width: 639px) and (max-width: 662px) { .responsive-font { font-size: 23px; } }
@media all and (min-width: 616px) and (max-width: 639px) { .responsive-font { font-size: 22px; } }
@media all and (min-width: 593px) and (max-width: 616px) { .responsive-font { font-size: 21px; } }
@media all and (min-width: 570px) and (max-width: 593px) { .responsive-font { font-size: 20px; } }
@media all and (min-width: 547px) and (max-width: 570px) { .responsive-font { font-size: 19px; } }
@media all and (min-width: 524px) and (max-width: 547px) { .responsive-font { font-size: 18px; } }
@media all and (min-width: 501px) and (max-width: 524px) { .responsive-font { font-size: 17px; } }
@media all and (min-width: 478px) and (max-width: 501px) { .responsive-font { font-size: 16px; } }
@media all and (min-width: 455px) and (max-width: 478px) { .responsive-font { font-size: 15px; } }
@media all and (min-width: 432px) and (max-width: 455px) { .responsive-font { font-size: 14px; } }
@media all and (min-width: 409px) and (max-width: 432px) { .responsive-font { font-size: 13px; } }
@media all and (min-width: 386px) and (max-width: 409px) { .responsive-font { font-size: 12px; } }
@media all and (min-width: 363px) and (max-width: 386px) { .responsive-font { font-size: 11px; } }
@media all and (min-width: 340px) and (max-width: 363px) { .responsive-font { font-size: 10px; } }
@media all and (min-width: 317px) and (max-width: 340px) { .responsive-font { font-size: 9px; } }
@media all and (max-width: 317px) { .responsive-font { font-size: 8px; } }