@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/open-sans/OpenSans-Regular-webfont.eot');
    src: url('../fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/open-sans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/open-sans/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/open-sans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{font-family: 'open_sansregular'; background:url('../images/bg.jpg')repeat left center;}
.navbar-fixed-bottom, .navbar-fixed-top{ position:inherit;}
.top-nav{ float: left; width: 100%; background:rgb(29, 133, 236); padding:2px 0px;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{ float:left; margin-left:24.7%;}

.top-nav .left{ padding: 0px;}
.top-nav .left li{ list-style: none; *margin-left: 10px; color:#fff; display: inline;}
.top-nav .left li a{ text-decoration: none; color:#fff; font-size: 12px; }

.top-nav .left .email{ background:url('../images/icons/close-envelope.svg') no-repeat left center; padding-left:17px; background-position: 0px 5px;}
.top-nav .left .email a{ color: #fff; font-size: 12px;}
.top-nav .left .ph{ background:url('../images/icons/smartphone-call.svg') no-repeat left center; padding-left:18px;}
.top-nav .right{ float: right; padding:0px;}
.top-nav .right .right1{ float: right; width: 100%; text-align: right;}
.top-nav .right .right1 li{ list-style: none; display:inline;}
.top-nav .right .right1 li a{ color: #fff; text-decoration: none; font-size: 12px;}
.top-nav2{ *padding: 0px;}
.top-nav3{ *padding: 0px;}
.top-nav4{ *padding: 0px;}
.top-nav5{ *padding: 0px;}
.nav-main1{ background: #fff;}

.top-nav .right .right1 .dwld{ background:url('../images/icons/downloading-action.svg') no-repeat left center; padding-left:17px;}
.top-nav .right .right1 .dwld a{ color: #fff; font-size: 12px;}
.get{ float: right;margin: 50px 0px;}
.get a{ padding: 10px 14px 10px 45px;color: #fff;text-transform: uppercase;font-size: 14px;background: rgb(9, 96, 183) url('../images/icons/get-money.svg') no-repeat left center; text-decoration: none; background-position: 16px;}
.get a:hover{ opacity: .8;}
.callus{ float: right; color:#000; font-size: 11px; text-transform: uppercase; font-weight: bold; width: 48%;}
.ph-num{ color: #0d60b3; width: 100%; float: left;}
.call-img{ float: right;}
.call-full{float: right; margin-top:49px;  margin-right: 15px;}
.call-full .phone{ color: #fff; font-size: 15px;  background: #0d60b3 url('../images/icons/smartphone-call.svg') no-repeat left center; padding: 9.5px 14px 9.5px 35px; background-position: 12px;}

.navbar-nav{ *margin-top: 27px;}
.navbar-inverse{ background: #0d60b3; border-bottom:1px solid #ccc;}
.navbar-inverse .navbar-nav>li>a{ color: #fff; font-size: 14px; text-transform: uppercase;}
.navbar-inverse .navbar-nav>li>a:hover{ color: #fff}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{ color: #fff; background:#257fda;}
.logo{ float: left; width:9%;margin: 14px 0px;}
.logo img{ float: left; width: 100%; }
.logo-name{ float: left; font-size:40px; font-weight: bold; color:#3399ff; text-transform: uppercase; margin-top:30px; *margin-left: 15px;}

.social{ float: right;margin-top: 34px;}
.social li{ float: left;  list-style: none; display: inline; padding: 5px; margin: 0px 2px; border: 1px solid #454647; border-radius:5px; }

.categories{ padding: 0px; margin-top: -66px; width:20%;}
.categories .all{ font-size: 14px;  color: #fff; background:#52a3f4 url('../images/icons/office-list.svg') no-repeat left center; background-position: 20px; padding: 15.9px 40px; text-transform: uppercase; float: left; width: 100%;}
.categories ul{ margin: 0px; padding: 0px;}
.categories ul li{ list-style: none; width: 100%; position: relative; z-index: 99;}
.categories ul li a{ color: #555; text-decoration: none; font-size: 13px; text-transform: uppercase; padding: 7.82px 20px; float: left; width: 100%; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background:#f2f2f2; position: relative; z-index: 999;}
.categories ul li a:hover{ background:#fff;}
.vie a{ background: #0d60b3 url('../images/icons/eye-open.svg') no-repeat left center !important; color: #fff !important; background-position: 60px !important; *padding-left: 60px !important; text-align: center; transition:all 1000ms ease;}
.vie a:hover{ background:#0d60b3 url('../images/icons/eye-open.svg') no-repeat left center !important; opacity: .8; background-position: 145px !important; transition:all 1000ms ease;}

.drop1{ position: relative; transition: all 1000ms ease; z-index: 999; background:url('../images/icons/play-arrow.svg')no-repeat right;}
.drop1a{ position: absolute; top: 51px; left:0px; width: 170px; transition: all 1000ms ease; z-index: 99;}
.drop1a li a{ background: #fff; }
.drop1:hover .drop1a{ left: 227px; transition: all 1000ms ease;}
.arw{    float: right; margin-top: -1px; margin-right: -16px;}


.slider{ background: #fff; padding: 15px;margin-top: -21px; min-height: 306px;}
.banner{ margin-top: 22px; width: 60%;}
.banner img{ width: 100%; float: left; height: 320px;}

.right-bar{ padding: 0px; width: 20%;}
.aim{ float: left; background:#1682ee;  transition: all 1000ms ease;}
.aim .img1{ display: none; transition: all 1000ms ease;}
.aim:hover{ background:#f2f2f2; transition: all 1000ms ease}
.aim:hover .img{ display: none; transition: all 1000ms ease}
.aim:hover .img1{ display: block; float: left; width: 25%; margin-top: 32px; transition: all 1000ms ease}
.aim:hover .head{ color:#1682ee; transition: all 1000ms ease}
.aim:hover p{ color:#1682ee; transition: all 1000ms ease}
.aim:hover .read{ color: #f00; text-decoration:underline;}
.aim .img1 img{ float: left; width:100%; transition: all 1000ms ease}
.aim .img{ float: left; width: 25%; margin-top: 32px; transition: all 1000ms ease}
.aim .img img{ float: left; width:100%; transition: all 1000ms ease}
.aim .cnt{ float: right; width: 70%; transition: all 1000ms ease}
.aim .head{ color: #fff; text-transform: uppercase; font-size: 17px; margin-top: 5px; float: left; width: 100%; border-bottom: 2px solid; margin-bottom: 3px; transition: all 1000ms ease}
.aim p{ color: #fff; font-size:12px; transition: all 1000ms ease; text-align: left;}
.read{ color: #f8ea5e; text-transform: capitalize; margin-left: 20px;}

.quality{ float: left; background:#0569ce; margin-top: 15px;}
.quality .img1{ display: none; transition: all 1000ms ease;}
.quality:hover{ background:#f2f2f2; transition: all 1000ms ease}
.quality:hover .img{ display: none; transition: all 1000ms ease}
.quality:hover .img1{ display: block; float: left; width: 25%; margin-top: 32px; transition: all 1000ms ease}
.quality:hover .head{ color:#1682ee; transition: all 1000ms ease}
.quality:hover p{ color:#1682ee; transition: all 1000ms ease}
.quality:hover .read{ color: #f00; text-decoration:underline;}
.quality .img1 img{ float: left; width:100%; transition: all 1000ms ease}
.quality .img{ float: left; width: 25%;margin-top: 32px;}
.quality .img img{ float: left; width:100%;}
.quality .cnt{ float: right; width: 70%;}
.quality .head{ color: #fff; text-transform: uppercase; font-size: 17px; margin-top: 5px; float: left; width: 100%; border-bottom: 2px solid; margin-bottom: 3px;}
.quality p{ color: #fff; font-size:12px; text-align: left;}

.value{ float: left; background:#0b4f94; margin-top: 15px;}
.value .img1{ display: none; transition: all 1000ms ease;}
.value:hover{ background:#f2f2f2; transition: all 1000ms ease}
.value:hover .img{ display: none; transition: all 1000ms ease}
.value:hover .img1{ display: block; float: left; width: 25%; margin-top: 32px; transition: all 1000ms ease}
.value:hover .head{ color:#1682ee; transition: all 1000ms ease}
.value:hover p{ color:#1682ee; transition: all 1000ms ease}
.value:hover .read{ color: #f00; text-decoration:underline;}
.value .img1 img{ float: left; width:100%; transition: all 1000ms ease}
.value .img{ float: left; width: 25%; margin-top: 32px;}
.value .img img{ float: left; width:100%;}
.value .cnt{ float: right; width: 70%;}
.value .head{ color: #fff; text-transform: uppercase; font-size: 17px; margin-top: 5px; float: left; width: 100%; border-bottom: 2px solid; margin-bottom: 3px;}
.value p{ color: #fff; font-size:12px; text-align: left;}

.product-panel{ padding: 0px; background: #fff;     margin-top: -6px;}
.product-panel .col-2{ float: left;  text-transform: uppercase;color: #0b4f94; text-align: center; background-size:100% 91%; font-family: monospace;     margin-top:5px; font-size: 35px;}
.product-panel .col-2 .head{ float: left; *width: 100%; border-bottom: 4px solid #0b4f94;}
.product-panel .col-2 .head span{ color:#636363;}
.product-panel .col-1{ padding:7.5px; list-style: none; position:relative;}
.product-panel .col-1 .img1{ float: left; width: 100%; text-align: center;     min-height: 155px;}
.product-panel .col-1 .img1 img{ float: left; width: 100%;}
.product-panel .col-1 .name1{ float:left; width: 100%; background:#eeeef9; padding: 11px 10px; color:#7d7d7d; text-transform: capitalize; font-size: 12px;}
.product-panel .col-1 .new1{ background: #f00; padding: 2px 7px;color: #fff; text-transform: uppercase; position: absolute;left: 10px;transform: rotate(-45deg); top: 21px;}
.product-panel .col-1:hover .img1{ display: none;}
.product-panel .col-1:hover .img2{ display: block; background:#000; opacity: .3;}
.product-panel .col-1 .img2{ display: none;}
.product-panel .col-1 .img2 img{ }
.product-panel .col-1 .view1{ display: none; position: relative; }
.product-panel .col-1 .view2{ display: none;}
.product-panel a .col-1:hover .view1{ position: absolute; display: block; top: 75px; text-align: center; *width: 100%; z-index: 9999; color: #fff; background: #42414f; padding: 9px 12px; border-radius: 50%; left: 75px; z-index: 999;}
.product-panel a .col-1:hover .view1:hover{ background:#1682ee;}
.view1:hover .view2{ position: absolute; top:-35px;  display: block; width: 150px; left: -55px; z-index: 999;}
.product-panel .col-1:hover .col-1{ background: #000;}
.piclist { margin-top: 0px !important;margin-left: 0px;padding: 0px;text-align: left;}
.picZoomer-pic-wp, .picZoomer-zoom-wp { border: 1px solid #fff; height: 300px !important;}
.piclist li img{ border: 1px solid #ccc;}
.picZoomer-pic-wp img{ border: 1px solid #ccc;}


.client-panel{margin:0px auto; background: #fff;}
.client-panel li{ list-style: none; float: left; display: inline;}
.client-panel .head{ float: left; width: 100%; color:#074d93; text-transform: uppercase; font-size: 20px; font-weight: bold; border-bottom: 5px solid #0b4f94; padding-bottom: 10px; margin-bottom: 8px; margin-top:5px;}
.client-panel .head span{ color: #636363;}
.client-panel li{ *border: 1px solid #ccc;}
.they{ text-transform: capitalize !important; color:#4a4a4a !important;}

footer .ftr1{background: #1682ee; padding: 5px 0px;}
footer .ftr1 .head{ float:left; width: 100%; color: #fff; font-size: 17px; text-transform: uppercase; font-weight: bold; margin-bottom: 5px;}
footer .ftr1 .head img{ width:45%;}
footer .ftr1 .head2{ float:left; width: 100%; color: #fff; font-size: 20px; text-transform: uppercase; *font-weight: bold; margin-bottom: 5px; font-family: monospace;}
footer .ftr1 P{ color:#fff; font-size: 13px; text-align: justify; line-height: 24px;}
footer .ftr1 P .read1 a{ text-transform:capitalize;  color: #f3cb57; margin-left: 10px;}

footer .ftr1 .cl-1 { padding: 0px;}
footer .ftr1 .cl-2 { padding: 0px; margin-bottom:14px;}
footer .ftr1 .cl-3 { width: 25%; /*margin-left: 25%;*/ padding: 0px;}
footer .ftr1 .cl-2 li{ list-style: none; line-height: 24px; background:url('../images/icons/checked.svg') no-repeat left center; padding-left:20px;}
footer .ftr1 .cl-2 li a{color:#fff; font-size: 13px; text-decoration:none;  transition:all 1000ms ease;}
footer .ftr1 .cl-2 li a:hover{ transition:all 500ms ease; margin-left: 5px; color: #f3cb57;}
footer .ftr1 .cl-1a{ padding: 0px; width: 22%;}
footer .contat{ float: right; width: 100%;}

footer .ftr1 .adrs{color:#fff; font-size: 13px; text-align: justify; float: left; background:url('../images/icons/location-pin.svg') no-repeat left top; padding-left: 18px; }
footer .ftr1 .ph1{color:#fff; font-size: 13px; text-align: justify; margin-top: 5px; float: left; width: 100%; background:url('../images/icons/phone-receiver.svg') no-repeat left center; padding-left: 18px;}
footer .ftr1 .eml1{ margin-top: 5px; float: left; background:url('../images/icons/close-envelope.svg') no-repeat left center; padding-left: 18px; }
footer .ftr1 .eml1 a{color:#fff; font-size: 13px; text-align: justify; text-decoration: none;}

footer .ftr2{ float: left; width:100%; padding:7px 0px; background:#0b4f94;}
footer .ftr2 .copy{ float:left; color: #fff; font-size: 12px; }
footer .ftr2 .view{ /*float: left;*/ text-align: center; /*width:40%;*/ color: #fff; font-size: 12px;}
footer .ftr2 .design{float:right; color: #fff; font-size: 12px; }
footer .ftr2 .design a{ text-decoration: none; color: #fff; font-size: 12px;}

.categories1{ display: none;}

@media (min-width:280px) and ( max-width:767px)
{  
    .top-nav .right{ float: left;}
    .navbar-inverse .navbar-nav > li > a{ color:#52a3f4;}
    .navbar-inverse .navbar-nav > li > a:hover{ color:#52a3f4;}
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{ float:none; margin-left: 0px; text-align: center;}
    .navbar-nav{ background: #fff;}
    .logo{ width: 30%;}
    .logo-name { width: 70%; margin-top: 10px;}
    .logo-name img{ width: 100%;}
    .get{ display: none;}
    .call-full .phone{ display: none;}
    .categories{display: none;}
    .categories1{display: block; width: 100%; margin-bottom: 20px; padding: 0px;}
    
    .categories1 .all{ font-size: 14px;  color: #fff; background:#52a3f4 url('../images/icons/office-list.svg') no-repeat left center; background-position: 20px; padding: 15.9px 40px; text-transform: uppercase; float: left; width: 100%;}
    .categories1 ul{ margin: 0px; padding: 0px;}
    .categories1 ul li{ list-style: none; width: 100%; position: relative; z-index: 99;}
    .categories1 ul li a{ color: #555; text-decoration: none; font-size: 13px; text-transform: uppercase; padding: 7.82px 20px; float: left; width: 100%; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background:#f2f2f2; position: relative; z-index: 999;}
    .categories1 ul li a:hover{ background:#fff;}
    .vie a{ background: #0d60b3 url('../images/icons/eye-open.svg') no-repeat left center !important; color: #fff !important; background-position: 60px !important; *padding-left: 60px !important; text-align: center; transition:all 1000ms ease;}
    .vie a:hover{ background:#0d60b3 url('../images/icons/eye-open.svg') no-repeat left center !important; opacity: .8; background-position: 145px !important; transition:all 1000ms ease;}
    .banner{ padding: 0px; width: 100%; margin-bottom: 15px;}
    .right-bar{ width: auto;}
    .aim .img{ margin-top: 17px;}
    .quality .img{ margin-top: 17px;}
    .value .img{ margin-top: 17px;}
    .product-panel .col-2{ display: none;}
    .product-panel a .col-1:hover .view1{ display: none;}
    .product-panel .col-1 .name1{ font-size: 9px; padding: 10px 5px;}
    .product-panel .col-1 .img1{ min-height:auto;}
    .client-panel .head{ font-size: 14px;}
    footer .ftr1 .cl-1a{ width:45%;}
    footer .ftr1 .cl-3{ margin-left: 0px; width: auto;}
    footer .ftr2 .view{ text-align: left; margin-top: 5px;}
    footer .ftr2 .design{ float: left; margin-top: 5px;}
    footer .ftr2{ margin-top: 10px;}
    
}


.panel-blue {
    cursor: pointer;
    margin-bottom: 15px;
    border: none;
    min-height: 100px;
   background: #1682ee url(../images/bg_blue.png) no-repeat center;
    position: relative;
    display: block;
    padding: 10px;
    text-align: left;
    min-height: 400px;
} 

.phone{

    background:url('../img/phone.png') no-repeat left 5px!important;
    padding-left:18px;border:none;color:#2e3192
}

 .email{background:url('../imges/email.png') no-repeat left 7px!important; 
    padding-left:18px;
    border:none;color:#2e3192}
.adrs 
{    color:#fff; 
    font-size: 13px; 
    text-align: justify; 
    /*float: left; */
    background:url('../images/icons/location-pin.svg') no-repeat left 5px; padding-left: 18px; 
    background-size: 15px auto;
     margin: 0px;}
  
  .phn 
{    color:#fff; 
    font-size: 13px; 
    text-align: justify; 
    /*float: left;*/ 
    background:url('../images/phone-receiver.png') no-repeat left 5px; padding-left: 18px;
    background-size: 12px auto;
    margin: 0px; }
   
   .mail 
{    color:#fff; 
    font-size: 13px; 
    text-align: justify; 
    /*float: left; */
    background:url('../images/mail.png') no-repeat left 5px; padding-left: 18px; 
    background-size: 12px auto;
    margin: 0px;
}


    .mh4 {
    background: #013571;
    background: #1874dc;
    background: -moz-linear-gradient(top, #1874dc 0%, #0D4BA9 100%);
    background: -webkit-linear-gradient(top, #1874dc 0%, #0D4BA9 100%);
    background: linear-gradient(to bottom, #52a3f4 0%, #52a3f4 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0D4BA9', endColorstr='#013571', GradientType=0);
    height: 35px;
    text-shadow: 1px 1px 0 #0D4BA9;
    padding: 0 10px;
    color: #fff;
    margin: 0;
    position: relative;
    margin-bottom: 10px;
    line-height: 35px;
    font-size: 14px;
    font-weight: 400!important;
    overflow: hidden
}

.mh4 span {
    background: #FD0;
    color: #0D4BA9;
    width: 45px;
    text-align: center;
    display: inline-block;
    position: absolute;
    right: -17px;
    top: -7px;
    line-height: 50px;
    margin-right: 10px;
    float: left;
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.mh4 span i {
    font-size: 13px;
    margin: 0;
    padding: 0;
    transform: rotate(30deg)
}




@media (min-width:768px) and ( max-width:1024px)
{
    .categories ul li a{ font-size: 10px;}
    .quality .head{ font-size:14px;}
    .value{ display: none;}
    .categories ul li a{ padding: 6.82px 20px;}
    .product-panel .col-1 .img1{ min-height:inherit;}
    .product-panel .col-1 .name1{ font-size: 9px;}
    .product-panel .col-2 .head{ font-size: 20px;}
    footer .ftr1 .cl-3 { margin-left: 20%; width: 30%;}
}



    
    
    
    
    
    
    #links
    {color:white !important;}
    
    #links a
    {color:white !important;font-size:13px !important;}
    
    
    #span-blue
    {font-size:12px}
    
    
    
     @media (min-width: 992px) and (max-width: 1199px) {
    #blue-contact {
        margin-left:5% !important;
    }
    
    
    #blue-div
    {padding-left:1px !importan}
    }
    
    #span-blue
    {margin-right:0px !important}
    
    
    
    
    
   @media (min-width: 768px) and (max-width: 991px) {
    #blue-contact {
        padding-right:0px !important;
    }
    
    #blue-div
    {padding-top:90px !important;}
    }
    
    #span-blue
    {margin-left:14px !important}
    
    
     
     
     
     
     
     @media (min-width: 441px) and (max-width: 767px){
     
     
      #blue-div
    {margin-top:90px !important;}
    }
     
     }
     
     
      @media (min-width: 100px) and (max-width: 440px){
     
     
      #blue-div
    {margin-top:60px !important;}
    
    #span-blue
    {font-size:12px !important;}
    
    
    }
    
    
     
     /*footer*/
     
     @media (min-width: 768px) {
     div.myview
     {text-align:center !important;}
     
     }
     
     @media (max-width: 767px) {
     div.myview
     {width:100% !important;text-align:center !important;}
     
     }
     
     
     
     @media (max-width: 991px) {
     #right,#powered
     {float:none !important;text-align:center !important;}
     
     
     #copy1,#design1
     {float:none !important;}
     
    
     
     }
          
    /*description page*/ 
    
     @media (max-width: 767px) {
     #box-ul
     {margin-left:0px !important;padding-right:40px !important;}
     
     #summer-drinks
     {padding-left:2px !important;}
     
     }
     
     
     
     /*home-page*/
     @media (min-width: 992px) and (max-width: 1119px){
     #col-images img
     {
     width:140px !important;height:93px !important;
     }
     }