/*==============================================
    Top bar Area Css
===============================================*/
.top-bar-area { background: #292929; padding: 7px 0 8px; }
.top-bar-area p { color: #fff; font-size: 14px; line-height: 24px; margin: 6px 0; }
.top-bar-area p i { color: #13b5ea; margin-right: 8px; }

/*==============================================
    Header Area Css
===============================================*/
.header-area { padding: 0 0 36px; }
.header-area2 { padding: 0px 0; }
.header-area2 .logo { margin-top: 14px; }
.header-contact-info { overflow: hidden; margin-top: 22px; }
.header-contact-info ul li { border-right: 1px solid #f7f7f7; display: inline-block; float: left; margin-right: 30px; padding-right: 30px; position: relative; padding-top: 4px; padding-bottom: 2px; }
.header-contact-info ul li:last-child { margin-right: 0; border-right: none; padding-right: 0; }
.header-contact-info ul li .iocn-holder { width: 48px; border-radius: 50%; border: 1px solid #13b5ea; }
.header-contact-info ul li .iocn-holder span { color: #13b5ea; display: block; font-size: 30px; font-weight: 500; height: 48px; line-height: 48px; text-align: center; transition: all 500ms ease 0s; width: 48px; }
.header-contact-info ul li .iocn-holder span.top-envelop { font-size: 40px; }
.header-contact-info ul li:hover .iocn-holder span { color: #2b2c36; }
.header-contact-info ul li .iocn-holder, .header-contact-info ul li .text-holder { display: table-cell; vertical-align: middle; }
.header-contact-info ul li .text-holder { padding-left: 10px; }
.header-contact-info ul li .text-holder h6 { color: #222222; font-size: 14px; font-weight: 600; text-transform: capitalize; margin: 0 0 10px; }
.header-contact-info ul li .text-holder p { color: #999; font-size: 14px; font-weight: 400; margin: 0; line-height: 16px; }
.top-social-links { float: right; margin: 15px 0; }
.top-social-links li { display: inline-block; margin: 0 0 0 15px; }
.top-social-links li:first-child { margin: 0; }
.top-social-links li a i { color: #999; font-size: 16px; transition: all 500ms ease; }
.top-social-links li a:hover i { color: #13b5ea; }

/*==============================================
    Mainmenu Area Css
===============================================*/
.mainmenu-area { margin-bottom: -35px; margin-top: -35px; position: relative; z-index: 999999; }
.mainmenu-area.stricky { position: fixed; width: 100%; top: 0; left: 0; margin: 0; background: #fff; }
.mainmenu-area:before { position: absolute; top: 0; width: 0%; right: 50%; background: #305dc3; height: 100%; content: ''; }
.mainmenu-area:after { position: absolute; top: 0; width: 0%; left: 50%; background: #13b5ea; height: 100%; content: ''; }
.mainmenu-area.stricky:after, .mainmenu-area.stricky:before { width: 50%; transition: all 0.2s ease 0s; }
.mainmenu-area .mainmenu-bg { position: relative; background: #305dc3; transition: all 0.5s ease 0s; z-index: 9; }
.main-menu { float: left; position: relative; }
.main-menu2 { float: right; }
.main-menu .navbar-collapse { padding: 0px }
.main-menu .navigation { float: left; margin: 0; position: relative; padding: 0; }
.main-menu .navigation li { float: left; padding: 0; position: relative; list-style: none; }
.main-menu .navigation li:first-child { }
.main-menu .navigation li.home a { background: #13b5ea none repeat scroll 0 0; font-family: FontAwesome; font-size: 24px; padding: 19px 24px 18px; }
.main-menu .navigation li.home a span { color: #fff; }
.main-menu .navigation li a { color: #ffffff; display: block; font-size: 14px; font-family: "Microsoft Yahei"; font-weight: 600; line-height: 30px; opacity: 1; padding: 19px 0px 18px 0px; margin-left: 14px; margin-right: 14px; position: relative; text-transform: uppercase; transition: all 500ms ease 0s; }
.main-menu2 .navigation li a { color: #222; padding: 35px 0; }
.main-menu2 .navigation li:last-child a { margin-right: 0px; }
.main-menu .navigation > li.dropdown > a { }
.mainmenu-area.stricky-fixed .main-menu .navigation > li:first-child > a { }
.main-menu .navigation li.current.home a, .main-menu .navigation li:hover.home a { background: #2b2c36; }
.main-menu .navigation > li.dropdown > a:after { }
.main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color: #80c3ff; opacity: 1; }
.main-menu .navigation > li > ul { position: absolute; background: #FFF; width: auto; z-index: 999;    box-shadow: 0 2px 2px #888; border-top: 3px #4071B4 solid;min-width: 120px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;padding-bottom: 10px;}
.main-menu .navigation li:hover .sub-nav { top: 100%; }
.main-menu .navigation > li > ul > li { float: none; margin: 0; padding: 3px 20px; position: relative; width: 100%; }
.main-menu .navigation > li > ul > li > a { white-space:nowrap;padding: 8px 5px;color: #333; border-bottom: 1px #dedede dotted; display: block; font-size: 14px; font-weight: 400; line-height: 20px; position: relative; text-transform: capitalize; transition: all 500ms ease 0s; margin: 0; }
.main-menu2 .navigation > li > ul > li > a { color: #333; padding: 12px 0px; }
.main-menu .navigation > li > ul > li > a:hover { color: #305dc3; font-weight: bold; }
.main-menu .navigation > li > ul >li { padding: 0 20px; }
.main-menu .navigation > li > ul > li.dropdown > a:after { }
.main-menu .navigation > li > ul > li.dropdown:hover > a:after { }
.main-menu .navigation > li > ul > li > ul { }
.main-menu .navigation > li > ul li:hover ul { }
.main-menu .navigation > li > ul > li ul li { }
.main-menu .navigation > li > ul > li ul li:first-child { }
.main-menu .navigation > li > ul > li ul li a { }
.main-menu .navigation > li > ul > li  > ul > li:hover > a { }
.main-menu .navbar-collapse > ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #ffffff; background: url(../images/icon/submenu-icon.png) center center no-repeat; background-size: 20px; cursor: pointer; display: block; z-index: 5; border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; }

/* Search Box style   */

/*=================== Cart And Search Option ===============*/

.mainmenu-area .right-column { position: absolute; right: 0; width: 150px; top: 0; z-index: 999; }
.nav_side_content { margin-top: 15px; position: relative; float: left; }
.nav_side_content .cart_select>button { font-size: 14px; text-transform: uppercase; position: relative; margin-right: 23px; color: #272727; }
.nav_side_content .cart_select>button span { font-weight: normal; padding: 0 0px; border-radius: 50%; position: absolute; top: 0; right: -20px; color: #13b5ea; }
.nav_side_content .cart_select>button i { font-size: 18px; margin-left: 5px; }
.nav_side_content .cart_select, .nav_side_content .search_option { }
.nav_side_content .search_option>button { width: 30px; height: 40px; position: relative; font-size: 14px; color: #fff; top: -2px; }
.nav_side_content .search_option form { height: 50px; width: 280px; padding: 5px; border-radius: 4px; margin: 0; left: auto; right: 0; border-color: #13b5ea; top: 54px; }
.nav_side_content .search_option form input { font-family: 'Raleway', sans-serif; font-weight: normal; width: 100%; height: 100%; background: transparent; color: #9e9e9e; border: 1px solid #f7f7f7; padding: 0 47px 0 10px; font-size: 15px; }
.nav_side_content .search_option form button { display: block; width: 40px; line-height: 40px; text-align: center; position: absolute; top: 5px; right: 5px; color: #13b5ea; }
.nav_side_content .cart_select { border-left: 1px solid #ececec; padding-left: 5px; }
.mainmenu-area .link_btn .thm-btn { background: #13b5ea; line-height: 67px; padding: 0 20px; }
.free-consulation-button { position: relative; height: 67px; width: 205px; }
.free-consulation-button a { background: #2c3e50; width: 205px; height: 67px; padding: 10px 0; position: relative; z-index: 1; }
.submenu-button { position: absolute; z-index: 10; right: 0; top: 0; display: block; border-left: 1px solid #dedede; height: 43px; width: 43px; cursor: pointer; pointer-events: none; }
.submenu-button::before { content: ''; position: absolute; left: 19px; top: 20px; display: block; width: 11px; height: 1px; background: #dedede; z-index: 99; }
.submenu-button::after { content: ''; position: absolute; top: 15px; left: 24px; display: block; width: 1px; height: 11px; background: #dedede; z-index: 99; }
.navigation .submenu-button::before { content: ''; position: absolute; left: 21px; top: 26px; display: block; width: 11px; height: 1px; background: #323232; z-index: 99; }
@media only screen and (min-width:991px) {
  .mainmenu-area .mobile-menu { display: none; }
}
@media only screen and (max-width:991px) {
  .mainmenu-area.stricky:after, .mainmenu-area.stricky:before { display: none; }
  .header-area2 .logo { margin-top: 14px; position: absolute; left: 0; top: 0px; z-index: 9999999; }
  .header-area { padding: 0 0 10px; }
  .mainmenu-area .navigation { display: none; }
  .header-contact-info ul li .iocn-holder { border: none; }
  .mainmenu-area { margin-bottom: 0px; margin-top: 0px; z-index: 999999; }
  .mainmenu-area.stricky-fixed { position: static; background: none; }
  .mainmenu-area .mainmenu-bg { background: #f7f7f7; }
  .free-consulation-button { height: 40px; float: left !important; margin-top: -40px; z-index: 9999999999; }
  .free-consulation-button:before { background: none; width: 205px; }
  .free-consulation-button a { height: 40px; padding: 8px 0; }
  .outer-search-box { float: right; height: 40px; width: 45px; margin-top: 0px; margin-bottom: 0px; margin-right: 0; background: #fff; border: 2px solid #ff2b58; }
  .outer-search-box .seach-toggle { margin: 0; color: #ff2b58; font-size: 14px; padding: 8px 0; line-height: 24px; }
  .search-box { background: #ff2b58; border-top: 2px solid #f02853; opacity: 0; padding: 20px; position: absolute; right: 15px; top: 145%; transition: all 500ms ease 0s; visibility: hidden; z-index: 999999999; }
  .outer-search-box .seach-toggle:hover, .outer-search-box .seach-toggle.active { background: transparent; }
  .main-menu { display: inline-block; float: right !important; padding-bottom: 0; padding-top: 0; z-index: 5; width: 100%; }
  .main-menu .mobile-menu li { margin-left: 0; margin-right: 0; padding: 0; }
  .main-menu .collapse { border: 0px !important; border-radius: 0px !important; float: none; margin: 0;  display: none !important; overflow: auto !important; padding: 0; width: 100%; height:60vh; overflow-y: auto }
  .main-menu .collapse.in, .main-menu .collapsing { border: none; border-radius: 0px; margin: 0 0 0; padding: 0; display: block !important; border-top: none; }
  .main-menu .navbar-header { position: relative; float: none; display: block; text-align: left; width: 100%; padding: 14px 0px 13px; right: 0px; z-index: 12; }
  .main-menu .navbar-header .navbar-toggle { border: 2px solid #13b5ea; display: inline-block; float: none; margin: 0; margin-left: 10px; z-index: 7; width: 45px; height: 40px; border-radius: 0; }
  .main-menu .navbar-header .navbar-toggle .icon-bar { background: #13b5ea none repeat scroll 0 0; font-weight: 700; }
  .main-menu .mobile-menu { background: #305dc3; float: none !important; margin: 0 !important; width: 100% !important; list-style: none; padding: 0; }
  .main-menu .mobile-menu > li { margin: 0px !important; float: none !important; width: 100%; padding: 0; position: relative; cursor: pointer; }
  .main-menu .navigation li.dropdown > a:after { display: none !important; }
  .main-menu .mobile-menu > li > a { padding: 10px 10px !important; }
  .main-menu .mobile-menu > li > ul, .main-menu .mobile-menu > li > ul > li > ul { position: relative; border: none; float: none; visibility: visible; opacity: 1; display: none; margin: 0px; left: auto !important; right: auto !important; top: auto !important; width: 100%; background: none; border-radius: 0px; -webkit-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; -moz-border-radius: 0px; transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; -o-transition: none !important; -moz-transition: none !important; }
  .main-menu .mobile-menu > li > ul, .main-menu .mobile-menu > li > ul > li > ul { border-top: 0px solid rgba(255, 255, 255, 1) !important; padding: 0; }
  .main-menu .mobile-menu > li, .main-menu .mobile-menu > li > ul > li, .main-menu .mobile-menu > li > ul > li > ul > li { opacity: 1 !important; top: 0px !important; left: 0px !important; visibility: visible !important; }
  .main-menu .mobile-menu > li > a, .main-menu .mobile-menu > li > ul > li > ul > li > a { padding: 10px 10px !important; line-height: 22px; color: #ffffff; margin: 0; text-align: left; display: block; }
  .main-menu .mobile-menu > li > ul > li > a { padding: 10px 20px !important; line-height: 22px; color: #ffffff; background: #1a1919; text-align: left; font-size: 12px; display: block; font-weight: 600; text-transform: uppercase; }
  .main-menu .mobile-menu > li:hover > a, .main-menu .mobile-menu > li > ul > li:hover > a, .main-menu .mobile-menu > li > ul > li > ul > li:hover > a, .main-menu .mobile-menu > li.current > a { background: #2b2c36; color: #ffffff !important; }
  .nav_side_content .search_option>button { color: #13b5ea; }

  .main-menu .mobile-menu > li{clear:both;b}
  .main-menu .mobile-menu > li > a{background-color: #1641a2;display: block;}
  .sub-nav li{float: left;width: 33.33%;}
  .sub-nav a{color:#FFF;font-size: 12px;padding-left: 10px;}

  .nav_side_content{display: none;}
}

/* Medium screen  */
@media only screen and (min-width:992px) and (max-width:1199px) {
  .main-menu .navbar-collapse{padding-left: 15px;}
  .header-contact-info ul li { margin-right: 0; }
  .main-menu .navigation li a{margin: 8px;font-weight: 500;}
}

/* Tablet Layout: 768px. */
@media only screen and (min-width:768px) and (max-width:991px) {

  /***
  =============================================
      Top bar Area style
  =============================================
  ***/
  .top-bar-area .top-info ul { text-align: center; }
  .top-bar-area .top-info ul li { float: none; text-align: center; }
  .top-bar-area .top-right { float: left; }

  /***
  =============================================
      Header Area style
  =============================================
  ***/
  .header-area .logo { text-align: center; margin: 0; }
  .header-contact-info { overflow: hidden; width: 300px; margin: 0 auto; margin-bottom: 20px; }
  .top-social-links { float: none; margin: 20px 0 0; text-align: center; }

  /***
  =============================================
      Mainmenu Area style
  =============================================
  ***/
  .main-menu .navigation > li.dropdown > a { padding-right: 4px; }
  .main-menu .navigation li a { padding: 19px 0px 18px; margin-left: 15px; }
  .outer-search-box { float: right; height: 40px; width: 40px; margin-top: 10px; margin-bottom: 10px; margin-right: 0; }
  .outer-search-box .seach-toggle { margin: 5px 0 0; }
  .search-box { background: #ff2b58; border-top: 2px solid #f02853; opacity: 0; padding: 20px; position: absolute; right: 15px; top: 145%; transition: all 500ms ease 0s; visibility: hidden; z-index: 999999999; }
  .free-consulation-button { height: 45px; float: left !important; margin-top: 5px; margin-bottom: 5px; }
  .free-consulation-button:before { background: none; }
  .free-consulation-button a { height: 45px; padding: 11px 0; }
  .main-menu .navigation > li:hover > ul { left: 15px; }
}
@media only screen and (max-width:991px) and (min-width:767px) {
  .header-contact-info ul li { padding-top: 15px; border: none; }
  .header-area .logo img { position: relative; left: -30px; }
}
@media only screen and (max-width:767px) {
  .top-bar-area { text-align: center; }
  .top-bar-area .pull-right, .top-bar-area .pull-left { width: 100%; }
  .mainmenu-area .link_btn .thm-btn { padding: 0 15px; }
  .mainmenu-area .right-column { width: 190px; }
  .nav_side_content .search_option form { width: 250px; }

  /***
  =============================================
      Top bar Area style
  =============================================
  ***/
  .top-bar-area .top-info ul { text-align: center; }
  .top-bar-area .top-info ul li { float: none; text-align: center; }
  .top-bar-area .top-right { float: left; }

  /***
  =============================================
      Header Area style
  =============================================
  ***/
  .header-area { padding: 30px 0 10px; }
  .header-area .logo { text-align: center; margin: 0 0 20px; }
  .header-area .logo img { position: relative; }
  .header-contact-info { overflow: hidden; width: 280px; margin: 0 auto; margin-bottom: 20px; }
  .header-contact-info ul li { border-right: none; float: left; margin-right: 0; padding-right: 0; padding-top: 15px; }
  .top-social-links { float: none; width: 280px; margin: 0 auto; margin-top: 20px; }

}

/* Wide Mobile Layout: 480px. */
@media only screen and (max-width:450px) {
  .nav_side_content .search_option form { width: 200px; right: -50px; }
}
.thm-btn { font-size: 16px; font-weight: 600; text-transform: uppercase; font-family: 'Montserrat', sans-serif; position: relative; transition: all 0.5s ease 0s; cursor: pointer; padding: 0 30px; line-height: 50px; display: inline-block; text-align: center; z-index: 1; }
.thm-btn:hover { color: #fff; }
.thm-btn:before { background-color: #444; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: scale(0.5, 1); transition: all 0.4s ease 0s; width: 100%; z-index: -1; }
.bg-clr1 { background: #13b5ea; color: #fff; }
.thm-btn:hover::before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.bg-clr2 { background: #222; color: #fff; position: relative; }
.bg-clr2:before { background-color: #13b5ea; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: scale(0.5, 1); transition: all 0.4s ease 0s; width: 100%; z-index: -1; }
.bg-clr2:hover:before { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
button { outline: none; border: none; background: none; }
.float_right { float: right; }