html, body { width: 100%; height: 100%; }
html, html a { -webkit-font-smoothing: antialiased; }
.animate-motion, .services-wrapper * { -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; }
.delay-motion-half { -moz-animation-delay: .5s; -o-animation-delay: .5s; -webkit-animation-delay: .5s; -ms-animation-delay: .5s; }
.delay-motion { -moz-animation-delay: 1s; -o-animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; }
.delay-motion2s { -moz-animation-delay: 2s; -o-animation-delay: 2s; -webkit-animation-delay: 2s; -ms-animation-delay: 2s; }
.delay-motion3s { -moz-animation-delay: 3s; -o-animation-delay: 3s; -webkit-animation-delay: 3s; -ms-animation-delay: 3s; }
.delay-motion4s { -moz-animation-delay: 4s; -o-animation-delay: 4s; -webkit-animation-delay: 4s; -ms-animation-delay: 4s; }
.delay-motion5s { -moz-animation-delay: 5s; -o-animation-delay: 5s; -webkit-animation-delay: 5s; -ms-animation-delay: 5s; }
input, select, textarea, button { outline: none; }
input, select, a img, button { border: 0; }
textarea { resize: none; }
ul li { list-style: none; padding-left: 0; margin-left: 0; }
p { margin-top: 0; font-size: 0.875em; }
.container { width: 100%; height: 100%; }
.div-background-color { background-color: #212a41; }
section { width: 100%; }
article { }
 div[id*=] {
}
a[data-info~=""] { }
/*<input type="text" value="xxx" onblur="if(this.value=='')this.value='xxx';" onfocus="if(this.value=='xxx')this.value='';" id="" >
*/

.video-wrap { height: 100%; }
.bottom-line { display: block; height: 2px; border-bottom: 1px solid white; margin: 0 auto; }
.landing-logo-box { position: absolute; top: -10%; right: 0; bottom: 0; left: 0; margin: auto; width: 60%; text-align: center; height: 100px; }
.landing-logo-box img { margin: 0 auto; }
.page-title { text-align: center; text-transform: uppercase; }
.page-title > span { display: inline-block; }
.text-2 { position: relative; top: 0.5em; }
/*****************************************************************
	homepage carousel
********************************/

.item { overflow: hidden; }
.carousel-item-box { position: relative; }
.customized-solutions, .wired-wireless, .it-infrastructure, .security-surveillance { width: 65%; }
.it-infrastructure { float: left; }
.security-surveillance { float: right; }
.wired-wireless { float: left; }
.customized-solutions { float: right; }
.home-carousel-body { position: absolute; z-index: 10; height: 100%; width: 30%; }
.home-carousel-body > div { position: relative; top: 50%; transform: translateY(-50%); text-align: center; margin: 0 auto; }
.carousel-body-01 { right: 0; margin-right: 5%; }
.carousel-body-02 { left: 0; margin-left: 5%; }
.carousel-body-03 { right: 0; margin-right: 5%; }
.carousel-body-04 { left: 0; margin-left: 5%; }
.bg-blue { background-color: #0f48fb; }
.bg-brown { background-color: #feaa17; }
.bg-pink { background-color: #f92dcb; }
.bg-green { background-color: #05e3c6; }
.home-carousel-body h3 { font-size: 4.4em; font-weight: 900; line-height: 1; margin: 0; }
.home-carousel-body .category-intro { font-size: 1.725em; }
.home-carousel-body .bottom-line { width: 30px; margin-bottom: 2.6em; margin-top: 0.6em; }
/*****************************************************************
	contact 
********************************/

.contact-box { width: 960px; margin: 0 auto; padding: 6em 0; }
.contact-us-title { font-weight: 100; font-size: 5em; text-align: center; margin: 0; color: white; line-height: 1.2; }
.contact-us-line { border-color: #f6862d; margin-bottom: 4em; width: 100px; margin-top: 2em; }
#kualalumpur a, #perak a { width: 100%; display: block; position: relative; }
#kualalumpur a img, #perak a img { display: block; max-width: 100%; height: auto; }
.location-tab { border: 1px solid transparent; }
.location-tab p { font-size: 1.8em; }
.location-tab > li { width: 50%; text-align: center; }
.location-tab > li > a { margin: 2em auto; width: 80%; padding: 0; color: #929bb2; }
.location-tab > li > a:hover, .location-tab > li > a:focus { background-color: transparent; border: 1px solid transparent; cursor: pointer; color: #fff; }
.branch-title { font-weight: 900; margin-bottom: 0.5em; font-size: 2.6em !important; }
.location-tab > li .btn-get-direction, .location-tab > li .btn-get-direction:focus, .location-tab > li .btn-get-direction:hover { -webkit-border-radius: 25px 25px 25px 25px; border-radius: 25px 25px 25px 25px; color: white; padding: 0.9em 0 0.7em; font-size: 1.6em; width: 180px; display: block; background-color: #26355a; font-weight: 900; margin-top: 1.4em; }
.location-tab > li .btn-get-direction { border: 1px solid #656c7d; }
.location-tab > li .btn-get-direction:hover, .location-tab > li .btn-get-direction:focus { border-color: white; }
.location-tab > li .btn-get-direction:active { top: 1px; position: relative; }
.location-tab > li.kualalumpur-xs { margin-bottom: 3em; }
#kualalumpur a:hover .get-direction-overlay, #perak a:hover .get-direction-overlay { display: block; }
.contact-email { text-align: center; margin: 0 0 2em; }
.contact-email a { font-size: 3em; padding: 1em 0; color: white; display: block; }
.contact-email a:focus { top: 1px; position: relative; }
.contact-email a:hover { text-decoration: none; background: #171f33; }
.icon-email { width: 35px; top: 4px; position: relative; margin-right: .6em; display: inline-block; }
.get-direction-text { top: 50%; transform: translateY(-50%); text-align: center; font-size: 1.8em; color: white; position: relative; width: 200px; display: block; padding: 0.6em 0 0.5em; margin: 0 auto; -webkit-border-radius: 25px 25px 25px 25px; border-radius: 25px 25px 25px 25px; background: rgba(255, 255, 255, 0.2); font-weight: 900; }
.get-direction-overlay { display: none; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, .6); }
.get-direction-overlay { animation: animationFrames linear .5s; animation-iteration-count: 1; transform-origin: 50% 50%; -webkit-animation: animationFrames linear .5s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -moz-animation: animationFrames linear .5s; -moz-animation-iteration-count: 1; -moz-transform-origin: 50% 50%; -o-animation: animationFrames linear .5s; -o-animation-iteration-count: 1; -o-transform-origin: 50% 50%; -ms-animation: animationFrames linear .5s; -ms-animation-iteration-count: 1; -ms-transform-origin: 50% 50%; }
 @keyframes animationFrames {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @-moz-keyframes animationFrames {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @-webkit-keyframes animationFrames {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @-o-keyframes animationFrames {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @-ms-keyframes animationFrames {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
/*****************************************************************
	our services
********************************/

.background-services .jumbotron { margin-bottom: 5em; }
.background-services { background-image: url(../imgs/background-services.jpg); background-repeat: no-repeat; background-size: 100% auto; }
.services-wrapper { margin: 0 auto; }
.services-box { box-shadow: 12.713px 26.065px 18px 0px rgba(0, 1, 1, 0.14); position: relative; padding: 2.5em 5.2em; width: 430px; margin: 0 auto; }
.services-box > .triangle-edge { display: none; position: absolute; width: 4px; height: 0; border-style: solid; }
.services-title { font-weight: 900; font-size: 3em; line-height: 1.1; position: absolute; text-align: left; position: absolute; top: 0; }
.services-desc { font-size: 1.8em; text-align: left; padding: 0; margin: 0; }
.service-box1 { left: -200px; z-index: 5; }
.service-box1 > .triangle-edge { top: 0; left: -27px; border-width: 0 0 270px 28px; border-color: transparent transparent #0f48fb transparent; }
.service-box1:hover > .triangle-edge { left: 0; border-width: 0 0 270px 0; }
.service-box2 { right: -200px; top: -20px; z-index: 4; }
.service-box2 > .triangle-edge { top: 0; right: -27px; border-width: 0 28px 270px 0; border-color: transparent transparent #05e3c6 transparent; }
.service-box2:hover > .triangle-edge { border-width: 0 0 270px 0; right: 0; }
.service-box3 { left: -200px; top: -80px; z-index: 3; }
.service-box3 > .triangle-edge { top: 0; left: -27px; border-width: 0 0 295px 28px; border-color: transparent transparent #f92dcb transparent; }
.service-box3:hover > .triangle-edge { border-width: 0 0 295px 0; left: 0; }
.service-box4 { right: -200px; top: -100px; z-index: 2; }
.service-box4 > .triangle-edge { top: 0; right: -27px; border-width: 0 28px 320px 0; border-color: transparent transparent #feaa17 transparent; }
.service-box4:hover > .triangle-edge { right: 0; border-width: 0 28px 320px 0; }
.service-box5 { left: -200px; margin-top: -160px; z-index: 1; }
.service-box5 > .triangle-edge { top: 0; left: -27px; border-width: 0 0 320px 28px; border-color: transparent transparent #0f48fb transparent; }
.service-box5:hover > .triangle-edge { left: 0; border-width: 0 0 320px 0; }
.service-box1 h2 { top: -59px; }
.service-box2 h2 { top: -91px; }
.service-box3 h2 { top: -59px; }
.service-box4 h2 { top: -86px; }
.service-box5 h2 { top: -93px; padding-right: 2em; }
/*****************************************************************
	about us
********************************/

.background-about .jumbotron { margin: 0 auto; }
.background-about { background-image: url(../imgs/background-about.jpg); background-repeat: no-repeat; background-size: 130%; }
.about-intro-box { margin: 5em auto 0; text-align: center; }
.about-intro-icon { width: 30px; display: block; margin: 0 auto; }
.about-intro { font-weight: 100; font-size: 3em; padding: 1em 0 0; margin-bottom: 0; }
.about-mission-wrapper { background-image: url(../imgs/background-mission.jpg); background-repeat: no-repeat; background-size: 100% auto; position: relative; }
.mission-box { background-color: rgba(245, 141, 30, 0.9); width: 55%; padding: 5% 4%; position: absolute; right: 3%; bottom: 0; }
.mission-title { font-size: 4em; font-weight: 900; text-align: center; margin: 0; padding: 0.3em 0; line-height: 1 }
.mission-body { font-size: 2em; text-align: center; margin: 0; }
.mission-icon { width: 40px; display: block; margin: 0 auto; }

/*****************************************************************
	nav
********************************/

header { position: relative; }
.brand-logo { width: 236px; float: left; }
#nav-absb .navbar-header { font-size: 1.6em; }
#nav-absb { background: rgba(0, 0, 0, .2); border: 0; }
#nav-absb .navbar-nav > li > a { color: #ccc; }
#nav-absb .navbar-nav > li > a:hover { color: white; }
#nav-absb .text-menu { font-weight: 900; color: white; }
.navbar-toggle > * { -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; }
.navbar-toggle .bar-1, .navbar-toggle.collapsed .bar-1 { width: 36px; }
.navbar-toggle .bar-2, .navbar-toggle.collapsed .bar-2 { width: 28px; }
.navbar-toggle .bar-3, .navbar-toggle.collapsed .bar-3 { width: 22px; }
.navbar-toggle:hover .bar-1, .navbar-toggle:hover .bar-2, .navbar-toggle:hover .bar-3, .navbar-toggle:focus .bar-1, .navbar-toggle:focus .bar-2, .navbar-toggle:focus .bar-3 { width: 36px; }
/*****************************************************************
	footer
********************************/

.footer-wrap { text-align: center; }
small { font-size: 1.4em; margin: 0; display: block; color: #57627e; text-transform: uppercase; padding: 1em 0; }
/*****************************************************************
	font face
********************************/

@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.glyphicon-menu-left, .glyphicon-menu-right { font-weight: 100; }
.glyphicon-menu-left { right: 0; margin-left: 50%; left: -50%; }
.glyphicon-menu-right { left: 0; margin-right: 50%; right: -50%; }
.glyphicon-menu-left:before { content: "\e257"; }
.glyphicon-menu-right:before { content: "\e258"; }

/*****************************************************************
	Media Queries
********************************/
@media (min-width: 1201px) and (max-width: 1439px) {
.about-mission-wrapper { height: 800px; }
}

@media (min-width: 1440px) {
.home-carousel-body .category-intro { font-size: 2.3em; }
.about-mission-wrapper { height: 960px; }
.mission-box { width: 40%; }
}

@media (min-width: 961px) {
.services-wrapper,  .about-intro-box { width: 960px; }
.page-title { font-size: 10em; }
}

@media (min-width: 489px) {
#nav-absb { padding: 18px 18px 14px 24px; }
}

@media (max-width: 1200px) {
.landing-logo-box { width: 55%; top: 0; }
.about-mission-wrapper { height: 640px; }
}

@media (max-width: 960px) {
.home-carousel-body h3 { font-size: 3.8em; }
.carousel-control { font-size: 2.6em; }
.contact-box { width: 100%; }
.tab-content, .contact-email { width: 90%; margin: 0 auto; }
.services-wrapper { width: 85%; }
.page-title { font-size: 8em; }
.about-intro-box { width: 90%; }
}

/* Portrait tablet to landscape and desktop */

@media (min-width: 769px) and (max-width: 959px) {
.services-box { width: 370px; padding: 3em 3em; }
.services-title { font-size: 2.8em; }
.service-box1,  .service-box3,  .service-box5 { left: -180px }
.service-box2,  .service-box4 { right: -170px }
.service-box1 .triangle-edge { border-width: 0 0 235px 28px; }
.service-box2 .triangle-edge { border-width: 0 28px 260px 0; }
.service-box3 .triangle-edge { border-width: 0 0 260px 28px; }
.service-box4 .triangle-edge { border-width: 0 28px 285px 0; }
.service-box5 .triangle-edge { border-width: 0 0 285px 28px; }
.about-mission-wrapper { height: 540px; }
.mission-box { width: 70%; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out;/** Opera **/
}
}

/* Landscape phone to portrait tablet */

@media (max-width: 768px) {
.customized-solutions,  .wired-wireless,  .it-infrastructure,  .security-surveillance { width: 45%; }
.home-carousel-body { width: 50%; }
.home-carousel-body h3 { font-size: 2.5em; }
.home-carousel-body .category-intro { font-size: 1.425em; line-height: 1.3; }
.home-carousel-body > div { width: 80%; }
.home-carousel-body .bottom-line { margin-bottom: 1.2em; margin-top: 0.2em; }
.contact-us-title { font-size: 4em; }
.get-direction-overlay { display: block; }
.services-wrapper { width: 90%; }
.triangle-edge { display: none; }
.page-title { font-size: 7em; padding: 1em 0px; margin: 0; }
.services-box { width: 80%; left: 0; right: 0; top: 0; }
.services-title { left: -1em; margin-bottom: 10px; padding-right: 3em; }
.service-box1 h2 { top: -69px; }
.service-box2 { top: 12em; }
.service-box2 h2 { top: -100px }
.service-box3 { top: 21em; }
.service-box3 h2 { top: -69px; }
.service-box4 { top: 33em; }
.service-box4 h2 { top: -96px; }
.service-box5 { margin-top: 46em; }
.service-box5 h2 { top: -103px; }
.background-about { background-size: 200%; background-position: center top; }
.about-intro-box { padding: 0 0 2em; margin-top: 0; }
.about-intro { font-size: 2.4em; }
.about-mission-wrapper { height: 540px; }
.mission-box { width: 85%; right: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* Landscape phones and down */

@media (max-width: 480px) {
#nav-absb { padding: 0 18px 0; }
.nav > li > a { padding-right: 0; padding-left: 0; }
.brand-logo { width: 180px; margin-top: 12px; }
.navbar-toggle { padding-top: 5px }
.customized-solutions,  .wired-wireless,  .it-infrastructure,  .security-surveillance { float: none; width: 100%; height: 180px; overflow: hidden; }
.home-carousel-body { width: 100%; position: relative; }
.home-carousel-body > div { position: relative; top: 0; transform: none; text-align: center; width: 80%; margin: 3em auto; }
.carousel-body-01,  .carousel-body-02,  .carousel-body-03,  .carousel-body-04 { margin-left: 0; }
.carousel-control { width: 10%; }
.contact-us-title { font-size: 3em; }
.contact-us-line { width: 50px; margin-top: 1em; }
.location-tab > li { width: 85%; margin: 0 auto; float: none; border-bottom: 1px solid #666; padding-bottom: 1em; }
.landing-logo-box { width: 85%; }
.page-title { font-size: 4.5em; }
.services-box { width: 100%; padding: 2em 3em; }
.services-box .services-title { left: 0; padding: 0; font-size: 2.5em; text-align: center; width: 100%; }
.services-desc { text-align: center; }
.service-box1 h2 { top: -59px; }
.service-box2 h2 { top: -86px; }
.service-box3 h2 { top: -59px; }
.service-box4 h2 { top: -86px; }
.service-box5 h2 { top: -88px; }
.about-intro { font-size: 1.9em; font-weight: 400; }
.mission-title { font-size: 3em; }
.mission-body { font-size: 1.7em; }
.about-mission-wrapper { height: 430px; }
.mission-box { width: 100%; top: 150px; padding: 6% 5%; background-color: #f58d1e; }
.contact-email { margin-top: 1em; }
.contact-email a { font-size: 2.5em; }
.icon-email { width: 25px; }
}

@media (max-width: 320px) {
#nav-absb .nav > li { width: 100%; display: block; }
.contact-us-title { font-size: 2.4em; font-weight: 400; }
.landing-logo-box { width: 75%; }
.about-mission-wrapper { height: 460px; }
.background-about { background-size: auto 550px; background-position: center top; }
.contact-email a { font-size: 2em; }
}


/*****************************************************************
	firefox hacks
********************************/

@-moz-document url-prefix() {
    /* insert class below */
    .sample-ff-class {
 width: 210px !important;
}
/* end */
}

/*****************************************************************
	IE
********************************/

@media screen and (min-width:0) {
/* IE9 and IE10 rule sets go here */
}