@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1200px){
	/*===== homepage =====*/
	.navContainer{ width:77%;}
	.search{ width:23%;}
	.noticeBar .message span, .noticeBar .message p{ font-size:18px;}
	.enginePackages ul li{ width:23.5%;}
	.owl-theme .owl-controls .owl-buttons .owl-next{ right:0px;}
	.owl-theme .owl-controls .owl-buttons .owl-prev{ left:0px;}
}

@media screen and (max-width:1100px){
	/*===== homepage =====*/
	.noticeBar .message span, .noticeBar .message p{ font-size:16px;}
	.noticeBar a{ width:18%;}
}

@media screen and (max-width:1024px){
	/*===== homepage =====*/
	.headerMain .mid a{ width:85%;}
	.mainNavigation ul li a{ padding:13px 16px;}
	h3{ font-size:16px;}
	.noticeBar p{ font-size:16px;}
	.noticeBar .tollfree{ width:180px;}
	.enginePackages ul{ text-align:center;}
	.enginePackages ul li { width: 23%; display:inline-block; float:none;}
}

@media screen and (max-width:992px){
	/*===== homepage =====*/
	.headerBar .left ul li{ margin-right:12px;}
	.headerBar .left ul li a{ font-size:13px;}
	.headerBar .right ul li a{ font-size:15.5px;}
	.mainNavigation ul li a{ font-size:15px; padding:13px 10px;}
	.search .textbox{ width:71%;}
	.noticeBar i{ font-size:22px;}
	.noticeBar p{ padding:0px;}	
	.noticeBar .tollfree { width: 166px; padding:24px 15px;}
	.noticeBar .message{ padding-left:0px; float:right; width:74%;}
	.noticeBar .message span, .noticeBar .message p { font-size: 14px; padding-top:0px;}
	aside{ width:28%; margin-right:20px;}
	.rightContent{ width:68%;}
	h2{ font-size:32px;}
	.enginePackages ul li{ width:22%; margin-right:10px;}
}

@media screen and (max-width:767px){
	/*===== homepage =====*/
	.headerBar .left, .headerBar .right{ width:100%; text-align:center;}
	.headerBar .right{ border-top:#333333 solid 1px;}
	.headerBar .left ul, .headerBar .right ul{ display:inline-block; float:none;}
	.headerMain{ padding-bottom:20px;}
	.headerMain .left, .headerMain .mid, .headerMain .right{ width:100%; text-align:center;}
	.headerMain .left a, .headerMain .right a{ float:none; display:inline-block;}
	.headerMain .mid a{ padding-top:10px; padding-bottom:30px;}
	.navigation{ padding:10px 0px;}
	.navContainer { width: 100%; margin-bottom:10px;
	background: rgba(222,222,222,1);
background: -moz-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(255,255,255,1) 51%, rgba(222,222,222,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(222,222,222,1)), color-stop(51%, rgba(255,255,255,1)), color-stop(100%, rgba(222,222,222,1)));
background: -webkit-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(255,255,255,1) 51%, rgba(222,222,222,1) 100%);
background: -o-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(255,255,255,1) 51%, rgba(222,222,222,1) 100%);
background: -ms-linear-gradient(top, rgba(222,222,222,1) 0%, rgba(255,255,255,1) 51%, rgba(222,222,222,1) 100%);
background: linear-gradient(to bottom, rgba(222,222,222,1) 0%, rgba(255,255,255,1) 51%, rgba(222,222,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#dedede', GradientType=0 );}
	.responsiveNav{ display:block;}
	.mainNavigation{ display:none;}
	.mainNavigation ul{ width:100%;}
	.mainNavigation ul li{ width:100%;border-bottom: 1px solid #CCC;}
	.mainNavigation ul li a{ padding:10px 15px; width:100%; text-align:center;}
	.mainNavigation ul li a i{ display:none;}
	.mainNavigation ul li ul.dropdown{ position:relative; float:left;}
	.mainNavigation ul li ul.dropdown li{ padding:0px;}
	.mainNavigation ul li ul.dropdown li a{ padding:8px 15px;}
	.mainNavigation ul li ul.dropdown li ul.subDropdown{ position:relative; float:left; left:0; padding:0px; z-index:1;}
	.search{ width:100%; background:#ffffff;}
	.search .textbox { width: 92%; border:none;}
	.noticeBar{ margin-bottom:20px;}
	.noticeBar .tollfree{ width:100%; text-align:center; padding:10px 15px;}
	.noticeBar i{ display:inline-block; float:none;}
	.noticeBar p{ width:auto; display:inline;}
	.noticeBar .icon{ display:none;}
	.noticeBar .message{ width:100%; padding:0px 0px 10px 0px; text-align:center;}
	.noticeBar .message span, .noticeBar .message p, .noticeBar .message a{ display:inline-block; float:none;}
	.noticeBar .message a{ margin:0px;}
	.noticeBar .message span, .noticeBar .message p { font-size: 16px;}
	aside{ width:100%; margin-right:0px;}
	.rightContent { width: 100%;}
	.block{ margin-bottom:10px;}
	h2{ margin-top:25px;}
	.titleMobile{ display:block; text-align:center; padding:10px 0px; height:auto;}
	.titleMobile i{ padding-left:5px;}
	#quickSearchDetail, #catalogSearchDetail, #performanceSearchDetail, #productSearchDetail{ display:none; padding:20px; border:#efefef solid 1px;}
	#quickSearchDetail h3, #quickSearchDetail .separator, #catalogSearchDetail h3, #catalogSearchDetail .separator, #performanceSearchDetail h3, #performanceSearchDetail .separator, #productSearchDetail h3, #productSearchDetail .separator { display:none;}
	.enginePackages ul li{ margin:0px 0px 0px 0px; width:46%;}
	footer{ text-align:center;}
	footer ul{ float:none; display:inline-block;}
	footer p{ text-align:center; padding:0px 0px 10px 0px;}
}

@media screen and (max-width:640px){
	/*===== homepage =====*/
	.search .textbox{ width:90%;}
	.mobileHeader{ display:inline-block; margin:10px 0px; cursor:pointer; float:left;}
	.headerBar .left ul{ display:none; float:left; margin-top:0px;}
	.headerBar .left ul li{ width:100%; text-align:center;}
	.headerBar .left ul li a{ width:100%; text-align:center;}	
	.headerBar .left ul li img { display:inline-block; width:auto; float:none;}
	.headerMain .mid a { width: 100%; padding-bottom:20px;}
}

@media screen and (max-width:480px){
	/*===== homepage =====*/
	.search .textbox { width: 83%;}
	.noticeBar a { width: 50%;}
	.noticeBar .message p{ padding-top:5px;}
	h2 { font-size: 26px;}
	.enginePackages ul li{ width:100%;}
	footer ul li a{ padding:0px 10px; font-size:13px; float:none; display:inline-block;}
	footer ul li span{ float:none;}
}

@media screen and (max-width:360px){
	footer ul li a{ padding:0px 10px; font-size:13px; float:none; display:inline-block;}
}



/* Elastic Search CSS*/


.ui-autocomplete {
   max-width : 500px;
    color: #555555;
    background-color: #fff;
    border: 1px solid #ccc !important;
	    border-radius: 5px;
		z-index:99999;
        display:grid;

}
.ui-autocomplete ul, .ui-autocomplete li{
list-style : none;
 border-radius: 5px;

}
ul.ui-autocomplete  {
    list-style-type : none;
    padding-left : 2px !important;
    z-index:9999;
    display: grid;
}

.ui-autocomplete li{letter-spacing: 2px;padding: 8px !important;font-weight: 500;letter-spacing: 1px;letter-spacing: 1px;font-size: 13px;}

.ui-autocomplete li:nth-child(odd) { 
background: #E7E7E7; }
.ui-autocomplete li:last-child { 
background:  #2278C9 !important; }
.ui-autocomplete li:only-child {
    background: #E7E7E7;
}	
	
.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;
color: white !important;
 border-radius: 5px;}
 
 .ui-autocomplete li:hover , .ui-autocomplete li:focus{
    cursor: pointer;
	background: #2278C9;
	color: white;
}
.btn:hover, .btn:focus {
    color: #333;
    text-decoration: none;
}
#basicaddon2 {
    border-radius: 0px;
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    background-color: #fdb22f;
    border: none;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    padding: 11px 21px;
cursor: pointer;}

#basicaddon2:hover{
     background-color: #112f87;
     color: #fff;
}

.ui-extended-desc{
display:none;
left :10px !important;
    top: 1px !important;
	}
	.ui-autocomplete li b:hover,.ui-autocomplete li b:focus,.ui-autocomplete li:hover b{
	color:white;
}
 
	.spinner_loading{
	 position: fixed;
   left: 43%;
   top: 50%;
   font-size:21px;
   color:black;
 
	}
	 .spinner_elastic {
   height:60px;
   width:60px;
   margin:0px auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(161,0,0,.15);
   border-right:6px solid rgba(161,0,0,.15);
   border-bottom:6px solid rgba(161,0,0,.15);
   border-top:6px solid rgba(161,0,0,1);
   border-radius:100%;
}
        .overlay{
  position: fixed;
	width: 100%;
	height: 100%;
    top:0;
	z-index:9999;
  background: rgba(0,0,0,0.2);
}