/*
font-family: 'Poppins', sans-serif; 100;200;300;400;500;600
*/


/*=========================================  
1.  GLOBAL
2.  DIV STICK ON TOP
3.  TEXT COLOR
4.  BACKGROUND ELEMENT
5.  HEADER
6.  NAVIGATION
7.  HOMEPAGE SLIDER
8.  MIN HEIGHT
9.  OUR PARTNERS SLIDER
10. SUB HERO
11. FAQ ACCORDION
12. PRODUCT GALLERY
13. PRODUCT TAB
14. SEARCH ELEMENT
15. BADGE
16. COMPARE PRODUCT TABLE
17. BUTTON/LINK
18. FORM
19. OUR PARTNERS - CAROUSEL
20. PADDING
21. HOMEPAGE
22. PAGENATION
23. BREADCRUMB
24. FOOTER
25. Umb Grid Extensions
26. PRINT FRIENDLY
27. MEDIA QUERY
28. EXTRA
=========================================*/


/*=========================================  
1. GLOBAL
=========================================*/


body {
	font-family: 'Poppins', sans-serif;
	background:#fff;
	font-weight:300;
	height: 100%;
	margin: 0;
	padding: 0;
	color:#000;
    font-size:16px;
	line-height: 22px;
	overflow-x: hidden;
}

.cs img{
    max-width: 100%;
    height: auto;
}

.cs a {	    
    color:inherit;
    color:#10174b;
	text-decoration:none;    
    transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
    transition: 0.3s;
}

.cs a:hover, .cs a:focus {color:#10174b;text-decoration:underline;}
.cs strong, b {font-weight:500;}
.cs p {font-size:16px;line-height: 22px;margin-bottom:15px;}
.cs p.lead-text {font-size:18px;line-height: 24px;}
.cs p.small-text {font-size:14px;line-height: 20px;}

.cs h1, .cs .h1-style, .cs h2, .cs .h2-style, .cs h3, .cs .h3-style, .cs h4, .cs .h4-style, 
.cs #productPhotoSummary h1, .cs #productPhotoSummary h2 {font-weight:200;}

.cs h1, .cs .h1-style{font-size:30px;line-height:34px;}
.cs h2, .cs .h2-style, .cs #productPhotoSummary h1{font-size:24px;line-height:28px;}
.cs h3, .cs .h3-style{font-size:22px;line-height:26px;}
.cs h4, .cs .h4-style, .cs #productPhotoSummary h2{font-size:20px;line-height:24px;}

@media only screen and (min-width : 768px)
{
    .cs h1, .cs .h1-style{font-size:44px;line-height:48px;}
    .cs h2, .cs .h2-style, .cs #productPhotoSummary h1{font-size:32px;line-height:36px;}    
    .cs h3, .cs .h3-style{font-size:28px;line-height:32px;}    
    .cs h4, .cs .h4-style, .cs #productPhotoSummary h2{font-size:24px;line-height:28px;}
}


.cs ul li{font-size:16px;line-height:22px;}

.cs .border-10{border:10px solid #ccc;}
.cs .border-primary{border-color:#10174b;}

.cs #imgLinkEffect img:hover{
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
    transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
    transition: 0.3s;
}


/*=========================================  
2. DIV STICK ON TOP
=========================================*/

.cs .sticky {position: -webkit-sticky;position: sticky;top: 30px;}
.cs .sticky:before, .cs .sticky:after {content: '';display: table;}


/*=========================================  
3. TEXT COLOR
=========================================*/

.cs .text-blue{color:#10174b;}
.cs .text-red{color:#fe0000;}
.cs .text-light-blue{color:#9dbee4;}
.cs .text-white{color:#fff;}
.cs .text-dark-blue{color:#10174b;}


/*=========================================  
4. BACKGROUND ELEMENT
=========================================*/

.cs .bg-cover{background-size: cover;background-position:center;}
.cs #bgTopLeft .bg-cover {background-size: cover;background-position: top left;}
.cs #bgTopCenter .bg-cover {background-size: cover;background-position: top center;}
.cs #bgTopRight .bg-cover {background-size: cover;background-position: top right;}
.cs .bg-repeat-y{background-repeat: repeat-y;background-position:top right;height:100%;right:-15px;}
.cs .bg-repeat-y-reverse{background-repeat: repeat-y;background-position:top left;height:100%;right:15px;}
.cs .bg-light{background:#f2f2f2;}
.cs .bg-dark-grey{background:#333;}
.cs .bg-blue{background:#10174b;}
.cs .bg-dark-blue{background:#10174b;}
.cs .bg-red{background:#fe0000;}
.cs .bg-light-brown{background:#c0c0b7;}
.cs .bg-dark-brown{background:#6f6f6a;}


/*=========================================  
5. HEADER
=========================================*/

.cs .top {
    padding: 10px 0px;
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index:9;
    */
}

@media only screen and (min-width : 992px)
{
    .cs .top{padding:10px 30px;}
}

.cs .top ul {margin:0;padding:0}
.cs .top ul li{list-style-type: none;display: inline-block;margin-right:20px;position:relative;}
.cs .top ul li:last-child{margin-right:0px;}
.cs .top ul li img{margin-right:10px;}
.cs .top ul li a:not(.btn){
    color:#fff;
    font-size:14px;

}
.cs .top .cartCount{position:absolute;z-index:1;top:-5px;left:17px;font-size:14px;font-weight:300;}
.cs .top .icon ul li a{font-weight:400;}
.cs .top .icon ul li a:hover{text-decoration:none;}
.cs .logoContact{padding:15px 0px;}

@media only screen and (min-width : 992px)
{
    .cs .logoContact{padding:15px 30px;}
}

.cs .logoContact ul{margin:0;padding:0;}
.cs .logoContact ul li{list-style-type: none;display: inline-block;margin-right:20px;}
.cs .logoContact ul li:last-child{margin-right:0px;}
.cs .logoContact ul li a{color:#10174b;font-size:24px;font-weight:500;}
.cs .logoContact ul li a:hover{text-decoration:none;}

.cs .logoImage img{width:180px;}
.cs .contactImage img{height:25px;}
.cs .removeText{display:none;}

@media only screen and (min-width : 768px)
{
    .cs .logoImage img{width:auto;}
    .cs .contactImage img{height:auto;}
    .cs .removeText{display:inline-block;}
}

.cs .cart-summary-wrapper .dropdown-toggle {
    width: 60px;
}

@media only screen and (min-width : 768px)
{
    .cs .cart-summary-wrapper .dropdown-toggle {
        width: 116px;
    }
}


/*=========================================  
6. NAVIGATION
=========================================*/


.menu-area{
    
    background: #10174b;
}

.menu-area .dropdown-toggle:after {
    display: inline-block;
}

@media only screen and (min-width : 992px)
{
    .menu-area .dropdown-toggle:after {
        display: none;        
    }
}

.dropdown-menu{
    padding:0;
    margin:0;
    border:0 solid transition!important;
    border:0 solid rgba(0,0,0,.15);
    border-radius:0;
    -webkit-box-shadow:none!important;
    box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{
    color:#fff;
    font-size:16px;
    text-transform:capitalize;
    padding:16px 15px; 
    display: block !important;
    text-decoration:none;
}

@media only screen and (min-width: 992px) {
    .mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{
 
        padding:16px 30px;

    }
}


.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{
    color: #fff;
    background: #333;
    outline: 0;
    text-decoration:none;
}

/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{
    background: #333;
}
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{
    background: #000;
    text-decoration:none;
}
.mainmenu .collapse ul ul ul > li:hover > a{
    background: #4CAF50;
}

.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{
    background:#333;
}
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{
    background:#333
}
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{
    background:#333
}

/********Drop-down menu work on hover*********/
.mainmenu{
    background: none;
    border: 0 solid;
    margin: 0;
    padding: 0;
    min-height:20px;
    width: 100%;}


/* @media only screen and (min-width: 767px) { */
@media only screen and (min-width: 992px) {
    .mainmenu .collapse ul li:hover> ul{
        display:block
    }
    .mainmenu .collapse ul ul{
        position:absolute;
        top:100%;
        left:0;        
        min-width:256px;
            min-width:273px;
        display:none
    }
    
    .mainmenu .collapse ul ul.wide{
        position:absolute;
        top:100%;
        left:0;        
        min-width:256px;
            min-width:550px;
        display:none
    }
    
    
    /*******/
    .mainmenu .collapse ul ul li{
        position:relative
    }
    .mainmenu .collapse ul ul li:hover> ul{
        display:block
    }
    .mainmenu .collapse ul ul ul{
        position:absolute;
        top:0;
        left:100%;
        min-width:256px;
            min-width:272px;
        display:none
    }
    
    /*******/
    .mainmenu .collapse ul ul ul li{position:relative}
    .mainmenu .collapse ul ul ul li:hover ul{display:block}
    .mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:256px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}

.cs .navbar-toggler-icon{
    width:1.5em;
    height:1.5em;    
}

.cs .navbar-toggler{
    font-size:1em;
    margin-left:-2px;
    border-radius:0;
    border:0px solid #fff;
}

.cs .navbar-light .navbar-toggler{
    color:#fff;
    border-color:#fff;
}


/*=========================================  
7. HOMEPAGE SLIDER
=========================================*/

.cs #homeSlider .carousel-inner img {width: 100%;height: 100%;}

@media only screen and (min-width : 992px)
{
    .cs #homeSlider .carousel-inner img {width: 100%;height: 100%;}
}


/*=========================================  
8. MIN HEIGHT
=========================================*/

.cs .mh-40 {min-height:auto;}   /*product list - filter*/
.cs .mh-65 {min-height:auto;}   /*product list - text pannel*/
.cs .mh-90 {min-height:90px;}   /*control store difference - text pannel*/
.cs .mh-92 {min-height:auto;}   /*homepage - how can we help you - go button*/
.cs .mh-97 {min-height:auto;}   /*ControlStore Difference - text box*/
.cs .mh-104{min-height:auto;}   /*homepage - how can we help you - go button - remove*/
.cs .mh-140{min-height:140px;}
.cs .mh-200{min-height:200px;}
.cs .mh-210{min-height:auto;}
.cs .mh-230{min-height:auto;}   /*ControlWorks Difference - New */
.cs .mh-510{min-height:auto;}

@media only screen and (min-width : 992px)
{
    .cs .mh-40 {min-height:40px;} 
    .cs .mh-65 {min-height:65px;}
    .cs .mh-92 {min-height:92px;}
    .cs .mh-97 {min-height:97px;}
    .cs .mh-104{min-height:104px;}
    .cs .mh-210{min-height:210px;}
    .cs .mh-230{min-height:230px;}
    .cs .mh-510{min-height:510px;}
}


/*=========================================  
9. OUR PARTNERS SLIDER
=========================================*/

#ourPartners img{height:40px}

@media only screen and (min-width : 1200px)
{
    #ourPartners img{height:60px}
}


/*=========================================  
10. SUB HERO
=========================================*/

.cs .sub-page-hero {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #4066ad;
    color: #fff;
}
@media only screen and (min-width : 768px)
{
    .cs .sub-page-hero{padding-top:70px;padding-bottom:70px;}
}


/*=========================================  
11. FAQ ACCORDION
=========================================*/

.cs .macro-faqs .accordion {
    margin-left: 0px;
    margin-top: 10px;
}

.cs .accordion .fa{
    margin-right: 0.5rem;
}

.cs .accordion > .card {
    border: 0;
}

.cs .accordion > .card > .card-header {
    margin-bottom: 10px;
    border-bottom: 0px;
}





/*=========================================  
12. PRODUCT GALLERY
=========================================*/


.cs .carousel-indicators{
    
}

.cs .carousel-indicators .active{
    background:#333;
}

.cs .carousel-indicators li{
    background:#ccc;
}

.carousel-item {    
    
}

.carousel-indicators li {
    width: 18px;
    height: 1px;
    border-radius: 100%;
}
.carousel-indicators {
    bottom: -60px;
}



/*=========================================  
13. PRODUCT TAB
=========================================*/


#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #f3f3f3;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid !important;
    font-size: 18px;
    font-weight: 500;
}
#tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #10174b;
    font-size: 18px;
    text-decoration:none;
}

#tabs .nav-tabs a.nav-link:hover,
#tabs .nav-tabs a.nav-link:focus{
    font-weight:400;
}

#tabs #spec tr td:first-child {
  background: #f2f2f2;
}



/*=========================================  
14.  SEARCH ELEMENT
=========================================*/


/* The overlay effect with black background */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9); /* Black with a little bit see-through */
}

/* The content */
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* Close button */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

/* Style the search field */
.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

/* Style the submit button */
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}




/*=========================================  
15. BADGE
=========================================*/



.cs .badge-danger{font-size:14px;font-weight:400;}




/*=========================================  
16. COMPARE PRODUCT TABLE
=========================================*/

.cs #compareProduct table,
.cs #compareProduct .name-line{
    font-size:14px;
    line-height:18px;    
}

.cs #compareProduct table td{
    padding:7px;
    border:0;
    font-weight:300;
}

@media only screen and (min-width : 992px)
{
    .cs #compareProduct table,
    .cs #compareProduct .name-line{
        font-size:16px;
        line-height:20px;
    }

    .cs #compareProduct table td{
        padding:10px;
        border:0;
    }    
}




/*=========================================  
17. BUTTON/LINK
=========================================*/

.cs .btn {
    border-radius: 0;
    padding-left: 16px;
    padding-right: 16px;
}
.cs .btn-extend {
    border-radius: 0;
    padding-left: 16px;
    padding-right: 82px;
}

.cs .btn-dark{background:#333;color:#fff;}
.cs .btn-dark:hover, .cs .btn-dark:focus{background:#fff;color:#333;border:1px solid #333;}

.cs .btn-primary{background:#10174b;color:#fff;border: 1px solid #10174b;}
.cs .btn-primary:hover, 
.cs .btn-primary:focus{background:#fff;color:#10174b;}

.cs .btn-info{color:#fff;background:#5998d3;}
.cs .btn-info:hover, .cs .btn-info:focus{background:#fff;color:#5998d3;}

.cs .btn-outline-cta{border:1px solid #fff;color:#fff;}
.cs .btn-outline-cta:hover, .cs .btn-outline-cta:focus{color:#fff;border:1px solid #000;background:#333;}

.cs .btn-outline-compare{border:1px solid #ccc;color:#333;}
.cs .btn-outline-compare:hover, .cs .btn-outline-compare:focus{border:1px solid #000;background:#333;color:#fff;}

.cs .btn-outline-primary{border:1px solid #10174b;color:#333;}
.cs .btn-outline-primary:hover, .cs .btn-outline-primary:focus{border:1px solid #10174b;background:#10174b;color:#fff;}

.cs .btn-dark:hover, .cs .btn-dark:focus,
.cs .btn-primary:hover, .cs .btn-primary:focus,
.cs .btn-info:hover, .cs .btn-info:focus,
.cs .btn-outline-cta:hover, .cs .btn-outline-cta:focus,
.cs .btn-outline-compare:hover, .cs .btn-outline-compare:focus,
.cs .btn-outline-primary:hover, .cs .btn-outline-primary:focus{    
    -webkit-box-shadow: 0px 10px 16px -13px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 16px -13px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 16px -13px rgba(0,0,0,0.75);
    text-decoration:none;
}
.cs .btn-link{color:#10174b;}
.cs .btn-link:hover, .cs .btn-link:focus{text-decoration:underline;}

.cs #productList .btn{
    padding:8px 0;
}

.cs .productNoteItalic{
    font-size:12px;
    line-height:14px;
    color:#ff0000;
    font-style: italic;
    padding-left:5px;
    text-decoration:underline;
}

.cs .productNote{
    font-size:12px;
    line-height:14px;
    color:#ff0000;    
    padding-left:5px; 
    font-weight:500;
}

.cs .btn-outline-primary:not(:disabled):not(.disabled).active, 
.cs .btn-outline-primary:not(:disabled):not(.disabled):active, 
.cs .show>.btn-outline-primary.dropdown-toggle{
    background-color:#cc0000;
    border-color:#10174b;    
}



/*=========================================  
18. FORM
=========================================*/


.cs .form-control{border-radius:0;}
.cs .form-control-lg{font-size:16px;line-height:30px;font-weight:400;}
.cs .form-control-sm{font-size:14px;line-height:18px;font-weight:400;}



.cs select {
  background-image:
    linear-gradient(45deg, transparent 50%, #1f5fac 60%),
    linear-gradient(135deg, #1f5fac 40%, transparent 50%) !important;
  
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.cs .select-sm{
    background-position:
    calc(100% - 13px) 10px,
    calc(100% - 3px) 10px,
    100% 0;
    background-size:
    7px 7px,
    10px 7px;
}

.cs .select-lg{
    background-position:
    calc(100% - 20px) 18px,
    calc(100% - 10px) 18px,
    100% 0;
  background-size:
    9px 9px,
    10px 9px;
     
}


.cs input.placeholder {
    text-align: center;
}






/*=========================================  
19. OUR PARTNERS - CAROUSEL
=========================================*/

.carousel-nav-icon {
   height: 48px;
   width: 48px;
}

.carousel-item .col,
.carousel-item .col-sm,
.carousel-item .col-md
{   
  margin: 8px;
  height: 69px;
  background-repeat:no-repeat;  
  background-position: center center;
}



/*=========================================  
20. PADDING
=========================================*/

.cs .pad50to15{padding:30px 15px;}
.cs .pad50to15contact{padding:30px 30px;}
.cs .pad15to0{padding:0px;}
.cs .pad0to15{padding-left:15px;padding-right:15px;}
.cs .pad30to15{padding:30px;}

.cs .margin0to15{margin:0 15px;}

@media only screen and (min-width : 992px)
{
    .cs .pad50to15{padding:50px;}
    .cs .pad50to15contact{padding:50px;}
    .cs .pad15to0{padding:0 15px;}    
    .cs .pad0to15{padding-left:0;padding-right:0;}
    .cs .pad30to15{padding:30px;}
    
    .cs .margin0to15{margin:0}
}

.cs .padTB50to30{padding:30px 0;} /*cta*/

@media only screen and (min-width : 992px)
{
    .cs .padTB50to30{padding:50px 0;}
}



/*=========================================  
21. HOMEPAGE
=========================================*/

.cs .homeProductNoteTitle{
    font-size:18px;
    font-weight:400;
    color:#fff;    
}

@media only screen and (min-width : 768px)
{
    .cs .homeProductNoteTitle{
        font-size:22px;  
    }
}

.cs .homeProductNote{
    position:absolute;
    z-index:1;
    left:40px;
    bottom:30px;
}

.cs .imagePannelText{
    position:absolute;
    z-index:1;
    left:40px;
    bottom:30px;
}


/*=========================================  
22. PAGENATION
=========================================*/


.cs .pagination {
   justify-content: center;
}

.cs .pagination>.active>a, 
.cs .pagination>.active>span, 
.cs .pagination>.active>a:hover, 
.cs .pagination>.active>span:hover, 
.cs .pagination>.active>a:focus, 
.cs .pagination>.active>span:focus{
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #10174b;
    border-color: #10174b;
    padding:6px 17px;
}

.cs .pagination>li>a:hover, 
.cs .pagination>li>span:hover,
.cs .pagination>li>a:focus, 
.cs .pagination>li>span:focus
{
    color: #fff;
    cursor: default;
    background-color: #10174b;
    border-color: #10174b;    
}

.cs .pagination>li>a, 
.cs .pagination>li>span{
    position: relative;
    float: left;
    padding: 6px 14px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin:0 3px;
}


/*=========================================  
23. BREADCRUMB
=========================================*/

.cs .breadcrumb{font-size:14px;line-height:18px;background: transparent;margin-bottom:0;}
.cs .breadcrumb ol{margin:0;padding:0;}
.cs .breadcrumb ol li{display:inline-block;color:#333;font-size:14px;line-height:18px;}
.cs .breadcrumb ol li::after{content: " > ";}
.cs .breadcrumb ol li:last-child::after{content: "";}
.cs .breadcrumb ol li a{color:#afafaf;font-size:14px;line-height:18px;}
.cs .breadcrumb ol li a:hover{color:#333;text-decoration:none;}
.cs .breadcrumb-item + .breadcrumb-item::before {
    content: '>';
}

/*=========================================  
24. FOOTER
=========================================*/
.cs footer {
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}
.cs footer ul{margin:0;padding:0}
.cs footer li{list-style-type: none;margin-bottom:16px;}
.cs footer p {font-size:16px;line-height:38px;}
.cs footer a {color:#fff;}
.cs footer a:hover, .cs footer a:focus {color:#fff;text-decoration:underline;}
.cs .social-icons a {opacity:0.9;}
.cs .social-icons a:hover, .cs .social-icons a:focus {opacity:1;}


/* ==========================================================================
25. Umb Grid Extensions
========================================================================== */

.no-gutters .row{
    padding-left: 15px;
    padding-right: 15px;
}

.no-gutters .row .col,
.no-gutters .row [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.cs .umb-grid{

}

.cs .umb-grid .grid-section > div,
.cs .row-narrow-width,
.cs .row-full-width,
.cs .umb-grid .column > div {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cs .row-narrow-width > .row {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}



img.imageleft,
img[style*="float:left"],
img[style*="float: left"] {
    margin-right: 20px;
    margin-bottom: 20px;
}

img.imageright,
img[style*="float:right"],
img[style*="float: right"] {
    margin-left: 20px;
    margin-bottom: 20px;
}


.cs .umb-grid img{
    width:100%;
}

@media only screen and (min-width : 768px)
{
    .cs .umb-grid img{
        width:auto;
    }
}


/* ==========================================================================
26. PRINT FRIENDLY
========================================================================== */


@media print

{

    body{
        color:#000!important;
        margin:0;
        padding:0;
    }

 

    @page{
        size: auto;
        margin: 25mm 25mm 25mm 25mm;
    }

 

    .cs{
        padding:0;
    }

    .cs *{
        text-align:left!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:0!important;
        padding-right:0!important;
        vertical-align:text-top!important;
        border:0!important;
    }
	
	.cs .top{
		display:none!important; 
	}
    
	.cs .logoContact .contactImage{
		display:none!important; 
	}
	
    .cs .topBanner{
        display:none!important; 
    }
    
    .cs .print{
        display:none!important;
    }
    
    .cs .megamenu{
        display:none!important;
    }
    
    .cs footer{
        display:none!important;
    }

    .cs a[href]:after {
        content: none !important;
    }
    
    .cs .banner{
        display:none!important;
    }
    
    .cs .adPannel{
        display:none!important;
    }


    .cs .richtext img{
        display:block;
    }
    
    .cs .adItemImageSmallNoChange{
        display:none!important;
    }
    
    .cs .adItemImage{
        display:none!important;
    }
    
    .cs .rmPrint{
       display:none!important; 
    }
 

    .cs #floatingSocialbar{
        display:none!important;
    }

 

    .cs #floatingSocialbar a{
        display:none!important;
    }



    .cs .pagination-container{
        display:none;
    }
    
    .cs iframe{
        display:none!important;
    }
    
    .cs .mainHero{
        height:138px;
        height:65px;
    }
    
    .cs .sub-page-hero{
        height:138px;
        height:65px;
    }
    
    .cs .articleHero{
        height:138px;
        height:65px;
    }
    
    .cs .mh-283{
        min-height:138px;
    }
    
    .cs .mh-566{
        min-height:138px;
    }

}


/* ==========================================================================
27. MEDIA QUERY
========================================================================== */


/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px)
{

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px)
{
 
}

/* Small Devices, Tablets (MD) */
@media only screen and (min-width : 768px)
{

}


/* Large Devices, Wide Screens */
@media only screen and (min-width : 992px)
{

}


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)
{

}

/* Large Devices - Extra-Large Devices */
@media only screen and (min-width : 1320px)
{

}

/* Extra-large Devices, Wide Screens */
@media only screen and (min-width : 1600px)
{

}


/*=========================================  
28. EXTRA
=========================================*/
.cs .umb-grid #how-can-we-help-you img{
    width:auto;
}

.cs .umb-grid #would-you-like-to-speak img{
    width:auto;
}


.cs .umb-grid #brand-story{
    padding:2rem 1rem 2rem 1rem;
    background-position:top center;
}

/* Small Devices, Tablets (MD) */
@media only screen and (min-width : 768px)
{
    .cs .umb-grid #brand-story{
        padding:2rem 4rem 2rem 40%;
    }
}

.cs .umb-grid #home-about-img{
    min-height:200px;
}

.cs .umb-grid #home-about-text{
    padding:2rem 1rem 2rem 1rem;
}

/* Small Devices, Tablets (MD) */
@media only screen and (min-width : 768px)
{
    .cs .umb-grid #home-about-text{
        padding:3rem 2rem 2rem 2rem;
    }
}

.cs .product-group-list-item img{
    width:100%;
}


.cs #partner-keyword .col-lg-8,
.cs #keep .col-lg-8{
    max-width:100%;
}

.cs #partner-keyword img,
.cs #keep .col-lg-8{
    width:auto;
}

.cs #partner-keyword .col-md-8,
.cs #keep .col-md-8{
    padding-left:30px;
    padding-right:30px;
}

/* Small Devices, Tablets (MD) */
@media only screen and (min-width : 768px)
{
    .cs #partner-keyword .col-md-8,
    .cs #keep .col-md-8{
        padding-left:30px;
        padding-right:30px;
    }
}



/*=========================================  
FORM
=========================================*/


.gnw .input-lg, .gnw .form-horizontal .form-group-lg .form-control {
	height: 52px;
	border-radius:3px;
}

.gnw .form-control:focus {
	border-color: #BBB4A7;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.gnw .input-group-lg>.form-control, .gnw .input-group-lg>.input-group-addon, .gnw .input-group-lg>.input-group-btn>.btn {
	border-radius: 3px;
}

.gnw .form-control{
    border:0;
    background:#f2f2f2;
    font-family: 'Nunito Sans', sans-serif;
    font-weight:400;
    border-radius:0;
}

.gnw input::-webkit-input-placeholder {
        color: #666;
}

.gnw input:-moz-placeholder {
        color: #666;
}

.gnw textarea::-webkit-input-placeholder {
        color: #666;
}

.gnw textarea:-moz-placeholder {
        color: #666;
}

.gnw select {
        color: #666;
}

.gnw textarea { white-space: pre-wrap !important; }



/*=========================================  
MACROS
=========================================*/

.container .macro .container-fluid,
.container-fluid .macro .container,
.container-fluid .macro .container-fluid {
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
    max-width: none;
}

.container .macro .container,
.container .macro .container-fluid {
    margin-left: -30px;
    margin-right: -30px;
    width: auto;
    max-width: none;
}

.macro-testimonials .uicarousel,
.macro-carousel .uicarousel {
    list-style: none;
    margin: auto;
    padding: 0;
    font-size: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.macro-testimonials .uicarousel-item,
.macro-carousel .uicarousel-item {
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    white-space: normal;
}

.macro-carousel .uicarousel-item-inner {
    height: 80px;
    padding: 0 1rem;
    text-align: center;
}

.macro-carousel .uicarousel-item img {
    max-width: 100%;
    max-width: 80%;
    height: auto;
    vertical-align: middle;
}

.macro-testimonials .uicarousel-item{
    padding: 0 1rem;
}

.macro-testimonials .uicarousel-item-inner {
    padding: 1rem;
    border: 1px solid #AAA;
    background-color: #EFEFEF;
}

.macro-image-video-box .box-img{
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
}
.macro-image-video-box .box-img img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
}
.macro-image-video-box .box-video iframe {
    display: block;
    margin:0;
    padding:0;
}

iframe {
    max-width: 100% !important;
}

.field-validation-error {
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

@media only screen and (min-width : 992px) {
    .macro-carousel .uicarousel-item {
        width: 20%;
        width: 18%;
    }

    .macro-testimonials .uicarousel-item {
        width: 33.333%;
    }
}




/*=========================================  
CART POPOVER
=========================================*/
.py-cart-summary{
    box-shadow: 0 0.25rem 5rem 0 rgba(0,0,0,0.3)
}
.cart-summary-list{
    width: 260px;
    max-height: 300px;
    overflow: auto;
}
.cart-product{
    position: relative;
    padding: 1rem;
    text-align: center;
}
.cart-product-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
}
.cart-summary-total{
    text-align: center;
    font-weight: bold;
    padding: 0.5rem 0;
    border-top: 1px solid #ccc;
}
.cart-empty{
    text-align:center;
    padding:0.6rem;
}



/*=========================================  
Additional
=========================================*/

#dashedBullet{
    
}

#dashedBullet ul{
    margin:0;
    padding:0;
}

#dashedBullet ul li{
    list-style-type: none;
    border-bottom:1px dashed #ccc;
    padding-bottom:10px;
    margin-bottom:10px;
}




#dashedBullet1{}
#dashedBullet1 ul{margin:0;padding:0;}
#dashedBullet1 ul li{list-style-type:none;border-bottom:1px dashed #ccc;padding-bottom:10px;margin-bottom:10px;}




.banner-desktop{
	display:block;
} 
.banner-mobile{
	display:none; 
}
@media only screen and (max-width : 767px) {
	.banner-desktop{
		display:none;
	} 
	.banner-mobile{
		display:block; 
	}
}