body{padding: 0; margin: 0; color: #363636; font-size: 18px; line-height:26px;font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;}
html{ scroll-behavior: smooth;}
::-webkit-scrollbar {width: 10px;}/* Track */::-webkit-scrollbar-track { background: #f1f1f1;}/* Handle */::-webkit-scrollbar-thumb { background: #141925;}/* Handle on hover */::-webkit-scrollbar-thumb:hover {background: #555;}/* Firefox */ * {scrollbar-width: auto;scrollbar-color: #222222 #f1f1f1;}

@font-face {font-family: 'Forma DJR Display';src: url('FormaDJRDisplay-Regular.woff2') format('woff2'), url('FormaDJRDisplay-Regular.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}
@font-face {font-family: 'Forma DJR Micro';src: url('FormaDJRMicro-Regular.woff2') format('woff2'), url('FormaDJRMicro-Regular.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}
@font-face { font-family: Helvetica; src: url("Fonts/Helvetica.ttf") format("ttf")}
h1{font-size: calc(28px + (60 - 25) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif; color: #000000;}
h2{font-size: calc(24px + (40 - 20) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;color: #000000;}
h3{font-size: calc(18px + (28 - 18) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;color: #000000;}
h4{font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;color: #000000;}
h5{font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;color: #000000;}
h6{font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (2500 - 300))); font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;color: #000000;}
.container-wrap p{font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;}
*{padding: 0px; margin: 0px;outline:none;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;}
h1,h2, h3, h4, h5, h6 { padding: 0px; margin: 0px; font-weight: 500; line-height: 1.2;}
.container-wrap a:focus {outline: 0px auto -webkit-focus-ring-color;outline-offset: 0px;}
.img-fluid{width: 100%;}
.container-wrap a, .container-wrap img {text-decoration: none;outline: none;}
.container-wrap ul{margin:0;padding:0;list-style:none;}
.container-wrap a:hover{-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
img{ max-width: 100%; }
html:not([lang=zh-cn]):not([lang=zh-tw]):not([lang=zh-hk]):not([lang=ja-jp]) body * {word-break: keep-all;}
.hp_btnPrimary {display: inline-block;padding: 0 0 11px 30px;}
.hp_btnPrimary a{color: #FFFFFF;background-color: #000000;border: 2px solid #000000; white-space: nowrap; padding: 7px 30px;font-size: 20px;display: inline-block;-webkit-transition: all .3s ease;transition: all .3s ease;}
.hp_btnPrimary a:hover{ background:#40defa;border-color:#40defa; text-decoration: none;}
.container-wrap *:hover{ transition: all .5s;outline:0;}
.container-wrap sub, .container-wrap sup {position: relative;font-size: 68%;line-height: 0;vertical-align: baseline;}
.container-wrap sup {top: -0.5em;}
.container-wrap .btn-close:focus {outline: 0;box-shadow: 0 0 0 0;}
.container-wrap  {max-width:1280px; margin: auto; width: 100%; padding: 0 15px; font-family: 'Forma DJR Micro',Arial,Helvetica,sans-serif;}


/*Nav*/
header{ width: 100%; position: absolute; top: 0; z-index: 999; min-height: 196px;}
.logo {float: left;padding: 40px 0px 20px 0;width: 100%;position: relative;z-index: 999;background: #fff;}
.logo a {font-size: 25px;padding: 0;  margin: 26px 0 0;font-weight: 500;height: auto; line-height: 1.25; color: #000; text-decoration: none;}
.logo img{margin-right: 20px;}
.main-nav{z-index: 999;min-height: 74px;float: left;position: relative;width: 100%;background: #fff;box-shadow:0 3px 6px 0 rgb(197 197 197 / 16%);border-bottom: 1px solid #000;}
nav ul { width: auto; float: left;margin: 0 auto; list-style: none; text-align: center; display: table;}
nav ul li { float: left;  padding: 22px 30px 22px 30px;  vertical-align: middle; position: relative;-webkit-transition: all .3s ease;  transition: all .3s ease; border-bottom: 3px solid transparent; }
nav ul li:first-child {padding-left: 0;}
nav ul li a { padding: 10px 0; color: #000; text-decoration: none; transition: all 0.2s ease; font-size: 18px;}
nav ul li a:hover { color: #000; }
nav ul li.dropdown-toggle{border-bottom: 3px solid transparent;}
nav .dropdown-list {display: none;top: 73px; margin: 0; padding: 7px 0; left: 0px;position: absolute;background-color: #fff;min-width: 204px;box-shadow:0 12px 12px 0 rgba(0,0,0,.2);z-index: 1;}
.dropdown-list li {width: 100%;  padding: 0;  text-align: left;}
.dropdown-list a { font-size: 14px; position: relative; color: black;padding: 8px 16px;text-decoration: none; display: block; }
.dropdown-list a:hover {background-color: #e6fcff;}
.dropdown-toggle:hover .dropdown-list {display: block;}
nav ul li.dropdown-toggle:hover  {color: #165dba;border-bottom: 3px solid #000000;border-radius: 2px;}
nav ul .dropdown-toggle::after{display: none;}
.dropdown-list li>a:after {border-top: 1px solid #000;bottom: 0;content: "";display: block; left: 17px; position: absolute; right: 17px;   transition: border-top-color .3s ease;}
.dropdown-list li:last-child >a:after{ border-top-color: transparent !important;}
.dropdown-list li:hover>a:after {border-top: 1px solid transparent;}
.main-nav .btn-group {  float: right; margin: 5px 0 0;}
a.button.primary {font-size: 16px; color: #FFFFFF;background-color: #000;line-height: 33px; padding: 0 16px 0 16px; display: block;margin: 14px 0 0;}
a.button.primary:hover { background-color:  #5a5a5a;}
.btncta a:hover{background: #5a5a5a;color: #FFFFFF;}
.dropdown-menu a{ color: #000;  padding: 8px 7px; opacity: 0.6; line-height: 29px;display: block; text-align: left;     float: left; font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1900 - 300))); position: relative; overflow: hidden;}

/*Mobile Menu Css*/
.mobile_btn {display: none; z-index: 999; font-size: 18px; margin:23px 0px 5px 0px;}
.mobile_btn a {text-decoration: none; color: #000; }
.btn-open:after { font-size: 24px;margin-left: 10px; color: #000; content: "\f107"; font-family: "FontAwesome";  }
.btn-close:after { font-size: 24px; margin-left: 10px; color: #000; content: "\f106"; font-family: "FontAwesome";  }
.toggle_menu {display: none; position: absolute; top:71px; width: 100%; height: 100vh; overflow: auto; z-index: 999; right: 0; background: rgb(0 0 0 / 49%);   box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);}
.toggle_menu ul{background: #fff;}
.toggle_menu ul li {float: left; width: 100%; text-align: left;}
.toggle_menu ul li a {border-right: 0px; padding: 15px; float: left; width: 100%; border-top: 1px solid #e9e9e9 !important;}
.mobile_btn a.btn-close {margin: 0 0 0;width: auto;background: none;opacity: 1;border-radius: 0;padding: 0;height: auto;}
.mobile_nav{display: none;}
 /*Nav*/

 /*banner */
.hero_banner{width:100%;float:left;position: relative;margin-top: 194px;background: #33f5b6;}
.hero_banner .front_Text{vertical-align:middle; width:100%;padding: 0; float: left; width: 50%; }
.hero_banner .front_Text .info_text{padding: 30px 0px 29px 0px;color: #000;vertical-align: middle;float: left;	}
.hero_banner .front_Text .info_text h2{ padding-bottom: 10px;}
.content-inner{background: #33f5b6;vertical-align: middle; float: left ; width: 100%;}
.hero_banner .front_Text h1{color: #000;padding: 22px 10px 0px 0px; }
.hero_banner .front_Text h1 span{font-size: 35px;    display: block;padding: 13px 0 13px;}
.hero_banner .front_Text p{font-size: 22px;}
.hero_banner .front_Text .container-wrap{margin-left: 0;}

.hero_banner .rtl_img{width: 50%; background: url("../images/sba_heroImg.jpg") no-repeat 50% 50% / cover; float: left;height: 600px;}
.hero_banner .rtl_img img{display: none;}
.btncta_2 {display: inline-block;padding: 30px 0 91px 0;}
.btncta_2 a{color: #000;background: #ffffff;text-align: center;padding: 12px 29px 10px;display: inline-block;font-size: 18px;}
.btncta_2 a:hover{background: #8e8e8e;color: #FFFFFF;}
.logo_img img{max-height: 60px;}
.border_top{border-top: 2px solid #000000;}
/*banner */

.affix {width: 100%;top: 0px;position: fixed;overflow: visible!important;transition: all .5s;z-index: 9998;margin: 0 auto;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: .1s;animation-delay: .1s;-webkit-animation-name: fadeInDown;animation-name: fadeInDown;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
.opacityin {opacity: 0;visibility: hidden;z-index: -1;transition: all .5S !important;margin-top: -91px;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: .1s;animation-delay: .1s;-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
 
.extra-indented{background-color:#e6e6e6; padding: 24px 0px 24px;width: 100%;float: left; text-align: left;}
.extra-indented h1{font-size: 50px; line-height: 52px; padding: 10px 0 10px 0; float: left;}

 

/*technology CSS*/
.technology{background-color:#fff;float: left;width: 100%;padding-bottom:60px;}
.technology h3{color: #07c084;font-size: 36px;line-height: 40px;float: left;width: 100%;padding: 8px 0 17px;}
.technology h3 span{color: #000; display: block; width: 100%; font-size: 25px;}
.ene_slide{ float: left; width: 33%;}
.hgt_img {min-height: 89px;display: flex;align-items: flex-end;justify-content: left;}
.hgt_img img{max-height: 80px;}
.ene_slide{padding: 21px 15px 14px 30px;border-left: 1px solid #000;min-height: 294px;}
.tech_flex{display: flex;border-top: 1px solid #000;}
.tech_flex:first-child{ border-top: 0px solid #000;}
.ene_slide:first-child{ border-left: 0px solid #000;}
.Windows_text{background-color: #ffffff;float: left;width: 100%;padding:40px 0 0 0; }
.Windows_text h2{ padding: 34px 0 50px 0;width: 100%; float: left;}
.technology .col-md-2{/* padding-top: 50px; */line-height: 28px;font-size: 24px; font-weight: bold;}
.technology .col-md-7{/* padding-top: 30px; */line-height: 28px;font-size: 22px;}
.row_1 .row{ align-items: center;}
/*technology CSS*/

/*Product Information*/
.product_information{background-color:#fff;float: left;width: 100%; }
.product_information h1{margin-top: 0px;}
.product_information .bg_color{background: #52f7bd; padding: 20px; text-align: center;}
.product_information .bg_color p{text-align: left;}
.product_information .bg_color img{margin-bottom: 20px;}
.product_information h3{padding-bottom:30px;}

/*Product Information*/


/*Product Information*/
.product_history{background-color:#b3ffe5;float: left;width: 100%; padding: 30px 0px;}
#product_history{float: left; width: 100%;}
.product_history p{padding: 10px 0px; line-height: 50px;}
/*Product Information*/
 
.history_info{float: left; width: 100%; background: #33f5b6;}
.history_info .rtl_img{max-width: 50%; width: calc(50%); background: url("../images/trfds.png") no-repeat 50% 50% / cover;  min-height:200px; position: absolute; right: 0; } 
.history_info .front_Text{width: 47%;  min-height: 200px;}
.history_info .front_Text p{padding-top: 60px;    font-size: 22px;}
  
.refurbishment {float: left; width: 100%;}
.refurbishment table tr td,.refurbishment table tr th{padding: 8px 0px;}
.refurbishment .heading{padding-top: 30px; font-size: 25px;}
.refurbishment .border-bottom{border-bottom:2px solid #000 !important;}
.history_info .rtl_img img{display: none;}
.solution {float: left; width: 100%;}

.solution_info a{color: #0c56b8;}


.midel_popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 1);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    max-width: 80%;
    max-height: 80%;
    overflow-y: hidden;
    text-align: center;
}

.midel-content {text-align: left; font-size:22px;}
.midel-content h2{text-align: center; padding-bottom: 20px;}
.close-popup {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 24px;
    color: #FFFFFF;
	background: #000;
	width: 25px;
	height:25px;
	text-align: center;
}
/* Mobile view css*/
@media screen and (max-width:1200px) {
.hero_banner .rtl_img{position: static; width: 100%; height: auto; float: left; background: none;}
.hero_banner .rtl_img img{display: block;width: 100%;}
.hero_banner .front_Text{float: left; min-height: fit-content;}
.hero_banner .front_Text .info_text{padding: 14px 15px 7px 0;}
.banner_sec .front_Text h1{line-height: normal; font-size: calc(40px + (80 - 18) * ((100vw - 300px) / (2500 - 300)));}
.hero_banner .front_Text h1,.description h1,.Slider_sec .slider_Text h1,.Windows_text h1,.probook_text h1,.extra-indented h1,.head_tech h1,.head_text h1,.custom_tab_nav h1,.hp-component h1,.datatable h2,.hero_banner .front_Text h2{line-height: normal; font-size: calc(28px + (60 - 18) * ((100vw - 300px) / (2500 - 300)));}
.laptop_1 h4,.technology h3,.hp-component h4,.banner_sec .front_Text h2,.Slider_sec .slider_Text h2,.hero_banner .front_Text h1 span {line-height: normal; font-size: calc(22px + (34 - 16) * ((100vw - 300px) / (2500 - 300)));}
.head_tech{ padding: 16px 0 16px;} 
.btncta_2{ padding: 1px 0 11px 0;}
.logo_img { margin: 19px 0 20px;}
h1.sus_dsk{ display: none;}
.sus_mobile{ display: inline-block;}
.sustainable-impact .sustainable_Text h1{font-size: 107px;line-height: 126px;}
.sustainable-impact .sustainable_Text{min-height: 645px;}
.sustainable_Text h2 span{display: block;}
.sustainable-impact .sustainable_Text h2 a{width: 134px; line-height: 35px;padding: 0 19px 0 3px; display: flex;}
.technology{ padding-bottom: 1px;}
.technology .col-md-7{font-size: 20px;}
}
@media screen and (max-width:1024px) {
nav ul li{padding-left: 15px;padding-right: 14px;}
.hero_banner .front_Text{width: 100%;}
.midel_popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width:100%;
    max-height:100%;
	width: 90%;
	padding: 15px;
}
	
}

@media screen and (max-width:992px) {
/* menu*/
nav ul { width: 100%;}
ul.dropdown-list{background-color: #f3f3f3; position: static; width: 100%;  padding:0;float: left; box-shadow: 0 0 0 rgba(0,0,0,.2);}
.toggle_menu ul li a{ padding: 10px 15px 7px;}
.toggle_menu .dropdown-list li a{ border-top: 1px solid transparent !important; padding: 12px 10px 12px 29px;}
.toggle_menu ul li .fa{ display: none;float: right; font-size: 24px;position: absolute;right: 15px;}
.mobile_btn {display: block;float: left;}
nav ul li{padding:0px} 
.main-nav .container .col-md-12{padding: 0px;}
.desktop_nav {display: none !important;}
.mobile_nav {display: block !important;}
.rotedArrow1 i.fa.fa-angle-down, .rotedArrow2 i.fa.fa-angle-down, .rotedArrow3 i.fa.fa-angle-down, .rotedArrow4 i.fa.fa-angle-down,.rotedArrow5 i.fa.fa-angle-down, .rotedArrow6 i.fa.fa-angle-down {    transform: rotate(180deg);}
.CloseMenu {text-align: center;padding: 20px 0;height: 100%;width: auto;background: none;opacity: 1;border-radius: 0;}
.CloseMenu:after{ display:none}
.CloseMenu img{cursor: pointer; margin: 18px 0 0;height: 33px;}
/* menu*/
.text_box ul li:nth-child(1){ min-height: 111px;}
.flex_energy {flex-direction: column;}
.description{max-width: 100%; width: 100%;padding: 0;}
.description p{ width: 100%; float: left; }
.efficient_design {max-width: 100%;}
.energy_efficient .slick-prev, .energy_efficient  .slick-next{ top: 23%;transform: scale(.8);}
.slick-next{right: -5px; transform: scale(.8);}
.slick-prev{left: -5px; transform: scale(.8);}
.datatable_slider_item.itemNo2{ margin: 0 0px 0;}

.banner_sec .front_Text{min-height: 500px;}
.Slider_sec .slider_Text .info_text{position: static; background: rgb(0 0 0);}
.Slider_sec .slider_Text h2{ padding: 15px 15px 28px 15px;}
.sustainable-impact .sustainable_Text h1 {font-size: 81px;line-height: 99px;}
.hero_banner .front_Text{width: 100%;}
.technology .col-md-2{padding-top: 33px;}
.product_information .bg_color {margin-bottom: 30px;}

.refurbishment img{margin-bottom: 30px;}
header{ min-height: 152px;}
.hero_banner{ margin-top: 149px;}
.logo{ padding: 17px 0px 1px 0;}
header{position: absolute; min-height: auto; top: 0;}

	.midel-content h2{padding-top: 40px; font-size: 22px;}

	
}

@media screen and (max-width:767px) {
.col_slide img{ margin-bottom: 12px;}
.laptop_1 h4{padding: 0 0 8px;}
.textfooter{padding: 5px 0 22px;}
.btncta,.btncta_2{padding: 1px 0 11px 0;}
.logo_img {  margin: 19px 0 36px;}
.notabclick{ padding: 0px 0 37px;}
.custom_tab_nav h1{padding: 18px 0 12px;}
.technology{ padding: 24px 0 31px;}
.datatable h2 {padding: 0 0 23px;}
.ene_slide {padding: 21px 12px 14px 12px;}
.Slider_sec .slick-prev, .Slider_sec .slick-next{ top: 12%;}
.Windows_text {padding-top: 0px;}
.refurbishment table{font-size: 16px;}
.technology .col-md-2{padding-top: 0px;padding-bottom:0px;}
.history_info .rtl_img{max-width: 100%; width: calc(100%); background: url(../images/trfds.png) no-repeat 80% 50% / cover; position: static;}
.history_info .front_Text {width: 100%; min-height: auto; padding: 0px;}
.history_info .front_Text p {padding: 20px 0 0 0;}
.technology .col-md-7{ padding-bottom: 22px;}
.technology h3 span{font-size: 20px;}

	.midel-content{font-size: 18px;}
	
}

@media screen and (max-width:620px) {
.banner_sec .front_Text h1{line-height: normal; font-size: calc(30px + (80 - 18) * ((100vw - 300px) / (2500 - 300)));}
.hero_banner .front_Text h1,.description h1,.head_tech h1,.custom_tab_nav h1,.Windows_text h1,.probook_text h1,.Slider_sec .slider_Text h1,.extra-indented h1,.head_text h1,.hp-component h1,.datatable h2,.hero_banner .front_Text h2{line-height: normal; font-size: calc(30px + (60 - 18) * ((100vw - 300px) / (2500 - 300)));}
.laptop_1 h4,.technology h3,.hp-component h4,.banner_sec .front_Text h2,.Slider_sec .slider_Text h2,.probook h4,.pro_inner h5,.hero_banner .front_Text h1 span {line-height: normal; font-size: calc(22px + (34 - 16) * ((100vw - 300px) / (2500 - 300)));}
.laptop_1 p,.description p,.hero_banner .front_Text .info_text p,.energy_efficient p,.probook p,.hero_banner .front_Text p{font-size: 17px;line-height: 22px;}

.rtabl li a{ padding-bottom: 8px;min-height: inherit;}
.custom_tab_nav ul { padding: 20px 0 0 0;}
.custom_tab_nav ul li {  width: 116px;}
.custom_tab_nav ul li a { font-size: 16px;  padding: 5px 1px 10px 1px;}
.tech_flex {flex-direction: column;  }
.Windows_text h2 {padding: 16px 0 15px 0;}
.logo a{font-size: 21px;}
.technology h3{padding: 1px 0 17px;}
.technology {padding: 24px 0 1px;}
}

@media screen and (max-width:620px) {
.technology	.col-sm-2{flex: 0 0 auto;
        width: 16.66666667%;}
	
.technology	    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
	
.technology	    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

	
	.product_history .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}