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

@font-face {
    font-family: "BentonSansLight";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BentonSans-Light.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Light.otf"), url("fonts/BentonSans-Light.woff"), url("fonts/BentonSans-Light.ttf") format("truetype"), url("fonts/BentonSans-Light.svg") format("svg");
}
@font-face {
    font-family: "BentonSansRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BentonSans-Regular.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Regular.otf"), url("fonts/BentonSans-Regular.woff"), url("fonts/BentonSans-Regular.ttf") format("truetype"), url("fonts/BentonSans-Regular.svg") format("svg");
}
@font-face {
    font-family: "BentonSansMedium";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/BentonSans-Medium.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Medium.otf"), url("fonts/BentonSans-Medium.woff"), url("fonts/BentonSans-Medium.ttf") format("truetype"), url("fonts/BentonSans-Medium.svg") format("svg");
}
@font-face {
    font-family: "BentonSansBold";
    font-style: normal;
    font-weight: normal;
    src: url("BentonSans-Bold.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Bold.otf"), url("fonts/BentonSans-Bold.woff"), url("fonts/BentonSans-Bold.ttf") format("truetype"), url("fonts/BentonSans-Bold.svg") format("svg");
}
@font-face {
    font-family: "BentonSansBook";
    font-style: normal;
    font-weight: normal;
    src: url("BentonSans-Book.eot?") format("embedded-opentype"), local('?'), url("fonts/BentonSans-Book.otf"), url("fonts/BentonSans-Book.woff"), url("fonts/BentonSans-Book.ttf") format("truetype"), url("fonts/BentonSans-Book.svg") format("svg");
}
::-moz-selection { 
  background: transparent;
}

::selection {
  background: transparent;
}
body{overflow-x: hidden;}
body{font-family: "BentonSansBook"; font-size:1vw; line-height: 1.42857143; color:#333; margin:0px; padding:0px; left:0px; top:0px; position: relative;height: 100%;text-align: left;height: auto !important;background:#ededee; }
body.loaded{/*background:url(../images/bg3.png) no-repeat center -12%; background-size: 100%;*/}

a{text-decoration: none;}
a:hover{color:#0076CB;}
a:focus, a:hover{border:0px; outline:0px;}
input, input:focus, a img, a {  outline: 0;}
p{margin:0 0 1vw 0;}
.sap_container{width:100%; position: relative; height: 100%;opacity: 0; }
.loaded .sap_container.showhome{display:block;opacity: 1;}
.sap-full-width{width:100%; clear:both; display: block;}

.no-padding{padding-left:0 !important; padding-right: 0px !important;}

.pos-relative{position: relative;}
.patl{position:absolute; top:0; left: 0;}
.patr{position:absolute; top:0; right: 0;}
.pabr{position:absolute; bottom:0; right: 0;}
.pabl{position:absolute; bottom:0; left: 0;}

.sap_logo{ position: absolute;width:auto; left:5%; top:2vw; z-index: 11111111;}
.sap_logo a{position: relative;}
.sap_logo img{width:4.8vw;}
.sap_logo .container{width:90%;}

.download_icon { position: absolute; right:3vw; top: 1.5vw; z-index: 111; }
.download_icon img { width: 2.2vw;  }

.tabs{width:100%; /*height:100%;*/ position: relative;padding:0 0 0 0;}
#home{background-color:#fff;  }
div#home:after { content: " "; position: absolute; bottom: 0; left: 0; width: 100%; height: 42vw; background: #ededee;}
.container{ position:relative;}
.tabs .container .row{ }
.tabs.playpadding{padding:1.2vw 0 0 0;}

.tabs .row.footer{min-height: auto; padding-top: 10px; padding-bottom: 10px;}
.footer-container .container {  width: 90%;}
.footer-container {
    position: fixed;
    text-align: left;
    background: #000;
    bottom: 0px;
    width: 100%;
    left: 0px;
    z-index: 11111;font-size: 0.8vw; color:#fff;padding: 5px 0;
}
.col-sm-4.footer_social{padding-left: 0px !important;}
.footer_social img {vertical-align: middle; width: 23px; margin: 0 0px 0 0;}
.footer_links { text-align: right;  padding-top: 5px; padding-right: 0 !important;  padding-left: 0 !important;}
.footer_links a { color: #fff;  padding: 0 0 0 10px;}
.tabs .row.footer{min-height: auto; padding-top: 10px; padding-bottom: 10px;}


.color_yellow{ color:#f0ab00;}
.color_blue{ color:#008fd3;}
.color_green{ color:#4fb81c;}
.color_orange{ color:#eb7300;}
.color_magenta{ color:#970a82;}
.color_blue2{ color:#0076cb;}

#preloadedimages1
{position:absolute;
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(../images/image29.png); background-size:100%;

}
#preloadedimages2
{position:absolute;
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(../images/image33.png);background-size:100%;

}
#preloadedimages3
{position:absolute;
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(../images/image34.png);background-size:100%;

}

img.arrow {  width: 3.8vw;}
.width100{width:100%;}

.head1{font-size: 2.5vw; line-height: 2.9vw;font-family: "BentonSansMedium"; font-weight: normal;}

.font1{font-size: 1.8vw;}
.font2{font-size:1.5vw;}
.font3{font-size: 1.8vw;}
.font4{font-size: 1.5vw; line-height: 1.9vw;font-family: "BentonSansMedium"; color: #000; }
.font5{font-size: 1vw; line-height: 1.4vw;}

.fontbold{font-family: "BentonSansBold";}
.fontmedium{font-family: "BentonSansMedium";}

.margin1{margin:1.5vw 0;}
.margin2{margin:1vw 0;}
.aligncenter{text-align: center;}


.column2{width:54vw;display:flex; align-items: center; justify-content: center; margin:1.5vw auto 0;}
.lcol1{width:27vw;  padding: 1.3vw 0 0 0;}
.rcol1{width:38vw; padding: 0 1.5vw 0 0 ; }
.imgwidth1{width:15vw;}
.imgwidth2 {  width: 34vw; margin:0.6vw 0;}
.imgwidth4{width:31vw;   margin: 0 0 1.5vw 0;}

.section{position:relative;}
.headersection{background: url(../images/bg1a.png) no-repeat top center; background-size: 100%; z-index:1;}
.textsec1{background: url(../images/bg2a.png) no-repeat top center; background-size: 100%;margin: -51.1vw 0 0 0;}
.hexagonsection{background: url(../images/bg4a.png) no-repeat top center; background-size: 100%;    margin: -13.5vw 0 0 0; z-index: 111;}
.hexagonsection:before{content:" "; position:absolute; left:0; bottom:0; width:100%; height:65%; background:#ededee;}

.headersection .circle_orange{background:transparent;}
.headercirsection{position: absolute; top: 0; left: 0; width: 100%;}

.circle_orange{position: relative;  margin:6.5vw 0 9vw -3.5vw;background: rgba(0,0,0,0.2);  width:35.5vw; height:35.5vw; border-radius: 50%;  font-family: "BentonSansRegular"; font-size:3.4vw; line-height: 3.8vw; color:#000; padding:0.1vw;display:flex; align-items: center; justify-content: center; transform: scale(0); z-index: 11;}
.circleinner { position: relative; width: 99%; height: 99%; background: #fdb913; border-radius: 50%; display:flex; align-items: center; justify-content: center; text-align: center; }
.circle_orange span{color:#fff;}
.sap-success{width:13vw;}

.leftline{position: absolute;  left: 0;   top: 11.5vw;width: 41vw; height: 38vw;overflow-x: hidden;}
.leftline img{left: -2.8vw; top:0; position: absolute;transform: rotate(3deg);}
.leftcline{width:41vw;}
.rightline{position: absolute;  right: 0;   top: 11.5vw;width: 41vw; height: 83vw; overflow-x: hidden;}
.rightline img{position: absolute;  right: -2.8vw;   top: 0;transform: rotate(-3deg); }

.man1{width:15vw; position: relative;}
.manlefthand{position: absolute;left: -1.3vw; top:-0.2vw; width:14vw;}
.manrighthand{position: absolute;right: -1.3vw; top:-0.2vw; width:14vw;}

.head_section{position: relative; margin:1vw 0 10vw 0;}

.text_section1{ background-size: 100%; background: url(../images/bg3a.png) no-repeat bottom center / 100%;text-align: center; padding: 28vw 0 8vw 0; margin: -18vw 0 0 0; color:#fff;z-index: 111;}

.sample{position: absolute; width: 77.7vw; left: -2vw; top:0;}
.intelligent_sec{/*background: url(../images/image1.png) no-repeat top center; background-size: 100%; */margin: 10vw auto -6vw; width:75vw;height:85vw; position: relative; color:#000; z-index: 1; opacity: 0; transform: scale(0.85);}
.intelligent_sec.showhex{ opacity: 1;}
.hex_bg{width:75vw; height: 20vw; overflow: visible; position: absolute; left: 0; top: 0px;}
.hex_bg .heximg{width:75vw; position: absolute; left: 0; top: 0px;}
.heximgsec{width:75vw; height: 85vw; position: absolute; left: 0; top: 0px;}
.heximg1{width:75vw;}
.itext{position: absolute; font-size: 2.1vw; transform: rotate(-90deg);font-family: "BentonSansMedium"; font-weight: normal;}
.itext1{ left: -10vw;   top: 41vw;}
.itext2{ right: -11.6vw;   top: 41vw;}
.itext a, .itext a:hover{color:#000;}
.centersec{position: absolute; width:33vw; height:43vw;left: 21.5vw; top: 22.8vw;}
.hlayer1{position: absolute; left: 0; top: 0; width: 33vw;}
.hlayer2{position: absolute; left: 2.3vw; top: 2.6vw; width: 28.3vw;}
.hlayer3{position: absolute; left: 4vw; top: 4.3vw; width: 25vw;}
.hlayer4{position: absolute; left: 11.3vw; top: 12.5vw;  width: 10.3vw;}
.hman{position: absolute; left: 11.5vw; top: 14.5vw; width: 10vw; height: 11.3vw; transform-origin: bottom center; text-align: center; font-size: 1.4vw; line-height: 1.7vw; font-family: "BentonSansMedium"; font-weight: normal;}
.hman span{font-family: "BentonSansBold"; font-size: 2.6vw; display: block; line-height: 2.6vw; }
.h-man{position: absolute; left: 0; top: 0; width: 16vw;}
.hmanlefthand{position: absolute;left: -0.7vw; top:2.4vw; width:13vw;}
.hmanrighthand{position: absolute;right: -1.15vw; top: 0.74vw; width: 16vw;}

.htext1{position: absolute; left: 3.5vw; top: 5.9vw; width: 26vw;}
.htext2{position: absolute; left: 1.5vw; top: 5vw; width: 28vw;}
.htext3{position: absolute; left: 2.8vw; top: 4vw; width: 28vw;}
.hicon_sec{position: absolute; left:0;top:0; width:100%; height:100%; }
.cpopup1 {
    position: absolute;
    width: 13vw;
    height: 3vw;
    left: 10vw;
    top: 7vw;
}
.cpopup2 {
    position: absolute;
    width: 4vw;
    height: 16vw;
    left: 23vw;
    top: 12vw;
    transform: rotate(15deg);
}
.cpopup3 {
    position: absolute;
    width: 4vw;
    height: 16vw;
    left: 7vw;
    top: 14vw;
    transform: rotate(-27deg);
}

.hicons{position: absolute; width: 9vw; height: 17vw; text-align: center;}
.hicon_img{}
.hicon_img img { width: 7vw; }
.wh100{width:100%; height:100%; transform-origin: bottom center;}
.hicon_text{text-align: center; margin: 0.6vw 0 0 0; font-size: 1.4vw; line-height: 1.7vw;font-family: "BentonSansMedium"; font-weight: normal;}
.hindicate{position: absolute; width: 3vw; left: 3.4vw; bottom: 0; height: 7.3vw;}
.hbullet{position: absolute; bottom: 0; left: 0; width: 3vw; z-index: 1;}
.hpin{position: absolute; left: 0.9vw; top: 0vw; width: 1vw;display: none;}
.hicons1{left: 14.7vw; top:15.5vw; width:11vw;}
.hicons1 .hicon_img img { width: 4.2vw; }
.hindicate1{transform: rotate(330deg);left: 11.9vw; bottom: 2.8vw;}
.hindicate1 .hpin { top: -1vw; }
.hicons2{left: 33vw; top: 8vw;}
.hicons2 .hicon_img img { width: 9vw; }
.hicons3{left: 52vw; top: 14.5vw;}
.hindicate3{transform: rotate(34deg);left: -5.1vw; bottom: 1.3vw;}
.hindicate3 .hpin { top: -1vw; }
.hicons4{left: 61.8vw; top: 34.5vw; width: 7vw;}
.hindicate4{transform: rotate(90deg);left:-7.2vw; bottom: 9.8vw;}
.hindicate4 .hpin { top: -0.5vw; }
.hicons5{left: 58.5vw; top:52vw; width:11vw;}
.hicons5 .hicon_img img { width: 8vw; }
.hindicate5{transform: rotate(120deg);left: -4.8vw; bottom: 14.1vw;}
.hindicate5 .hpin { top: -1vw; }
.hicons6{left: 44.5vw; top:62.5vw; width:11vw;}
.hicons6 .hicon_img img { width: 8vw; }
.hindicate6{transform: rotate(152deg);left: -0.5vw; bottom:17.9vw;}
.hindicate6 .hpin { top: 0vw; }
.hicons7{left: 21vw; top:62vw; width:11vw;}
.hindicate7{transform: rotate(208deg);left: 7.4vw; bottom: 17.7vw;}
.hindicate7 .hpin { top: 0vw; }
.hicons8{left: 6.5vw; top:49.5vw; width:11vw;}
.hicons8 .hicon_img img { width: 5vw; }
.hindicate8{transform: rotate(238deg);left: 12.4vw; bottom: 11.5vw;}
.hindicate8 .hpin { top: -1vw; }
.hicons9{left: 5vw; top:33.5vw; width:11vw;}
.hicons9 .hicon_img img { width: 5vw; }
.hindicate9{transform: rotate(270deg);left: 13.4vw; bottom: 9vw;}
.hindicate9 .hpin { top: -1vw; }


.hpopuplink{position: absolute; width:100%; height:60%; left:0px; top:0px; z-index: 111;}

.head3{font-size: 2.2vw; line-height: 2.6vw;font-family: "BentonSansMedium"; font-weight: normal; text-transform: uppercase;}
.pimg img{margin:0 0 1.5vw 0; height: 8vw;}
.ptext1{ font-size: 1.6vw; line-height: 2vw; margin: 2.2vw 0 1.8vw 0;}
.plinks a{font-size: 1.2vw; line-height: 1.7vw;font-family: "BentonSansMedium"; text-decoration: underline;}
.plinks a:focus, .plinks a:hover { color: #0066b3;}

.workflow{position: relative;width:67vw; margin:-17vw auto 0 auto; display: flex;}
.hcol{ padding:18vw 1.5vw 6vw 1.5vw; text-align: center;display: inline-block; width: 24.9%; vertical-align: top;}
.hcol1{background: url(../images/image22.png) no-repeat left top; background-size: 100%;margin: 0 0 0 -1.2vw;}
.hcol2{background: url(../images/image23.png) no-repeat left top; background-size: 100%;}
.hcol3{background: url(../images/image23a.png) no-repeat left top; background-size: 100%;}
.hcol4{background: url(../images/image22a.png) no-repeat left top; background-size: 100%;}
.col_img img{ width:auto; height: 7vw; }
.col_head{font-size: 1.8vw; margin:0.8vw 0; }
.col_text{font-size: 1.2vw;text-align: left; padding: 0 0.2vw 0 0.2vw;}
.hcol1 .col_head, .blue_bdr .head3{background: -webkit-linear-gradient(45deg , #00b2ec, #0260a4 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hcol2 .col_head, .magenta_bdr .head3{background: -webkit-linear-gradient(45deg , #a5218d, #511d7c 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hcol3 .col_head, .orange_bdr .head3{background: -webkit-linear-gradient(45deg , #f5891f, #d3541a 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hcol4 .col_head{background: -webkit-linear-gradient(45deg , #8fb212, #4fb81c 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
button{border:0px; background: transparent; margin: 0 auto !important;}
button img{width:3vw;}

.text_section2{margin: 3vw 0 9vw 0;}
.head2{font-size: 2.5vw; line-height: 2.9vw;font-family: "BentonSansBold"; font-weight: normal;background: -webkit-linear-gradient(
45deg , #f0ab00, #4fb81c 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}

.bottom_section { padding: 14vw 0 13vw 0; color:#fff; position: relative;background:#ededee; z-index:1111;}
.bottom_section:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/bg4.png) no-repeat top center;
    background-size: 100%;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.bottom_section .manwithflag{ position: absolute; right: 0px; top:-25vw;  width:28vw; height:42vw;  z-index: -1;}
.bottom_section .container{z-index: 11;}
.bleftline{position: absolute;  left: 0;   top: -2vw;width: 39vw; height: 35vw;overflow-x: hidden;}
.bleftline img{left: -2.3vw; top:0; position: absolute; }
.bleftcline{width:39vw;}
.brightline{position: absolute;  right: 0;   top: -2vw;width: 39vw; height: 35vw; overflow-x: hidden;}
.brightline img{position: absolute;  right: -2.3vw;   top: 0; }
.bman1{width:19vw;margin: -7vw 0 0 5vw; position: relative;}
.imgwidth3{width:19vw;}
.bmanlefthand {
    position: absolute;
    left: -6vw;
    top: -0.5vw;
	width: 24vw;}
.bmanrighthand {
    position: absolute;
    right: -3.5vw;
    top: -0.5vw;
    width: 24vw;
}

.mobileshow{display:none;}
@media only screen and (min-width:200px) and (max-width: 380px){
   .text_section1 { padding: 22vw 0 8vw 0 !important;} 
}
@media only screen and (min-width:200px) and (max-width: 760px){
    html, body{overflow-x:hidden;overflow-y: visible !important;}
.mobileshow{display:block;}	
.mobilehide{display:none;}
.circle_orange { margin: 12.5vw 0 3vw 9.5vw;}
#btn0 img {  width: 60px;}
.col-sm-3, .col-sm-9, .col-sm-12, .col-sm-4, .col-sm-8, .col-sm-10{float:left;}
.col-sm-3{width:30%;}
.col-sm-9{width:68%;}
.text_section2 .col-sm-10{width:80%;} 
.col-sm-4{width:29%;}
.col-sm-8{width:68%;}
.col-sm-12{width:100%;}
.hex_bg{position:relative; margin:0 auto;}
.head_section { margin: 6vw 0 0vw 0; }
.man1 { transform: scale(1.15); margin: 0 0 0 9vw;}
.head1 br, .font1 br, .ptext1 br{display:none;}
.head1 { font-size: 15px; line-height: 19px;}
.font1 { font-size: 12px; }
.text_section1 { padding: 24vw 0 8vw 0;margin: -10vw 0 0 0 !important;}
.text_section1 .font1 { width: 80%; margin: 0 auto; }
.footer-container {  font-size: 8px;}
.footer_social, .footer_links {  width: 100%; text-align: center; margin:2px 0px;}
.footer_social img {width: 16px;}
.footer_links a {  padding: 0 2px;}

.bman1 { margin: -2vw 0 0 5vw;}	
.col_img img { width: auto; height:10vw; }
.col_text { font-size: 1.7vw; text-align: center;padding: 0 1vw 1.5vw 1vw; }
.hcol { height: 51vw;  padding: 23vw 1.5vw 9vw 1.5vw;}	
.bottom_section { padding:9vw 0 13vw 0;}
.white-popup.usecase-popup .mfp-close {  width: 25px !important; height: 25px !important;  top: 4px !important; right: 1px !important;}
.popup-container {  width: 80% !important;}
.pimg img {  margin: 10px 0 15px 0; height: 60px; }
.head3 { font-size: 14px; line-height: 20px;}
.ptext1 { font-size: 13px; line-height: 17px;width: 92%;  margin: 0 auto;}
.plinks a { font-size: 12px; line-height: 18px;}
.intelligent_sec { margin: 16vw auto 1vw; transform: scale(1); }
.workflow { width: 76vw; margin: -19vw auto 0 auto;}
.hcol1{margin:0px;}
.hexagonsection:before{height:69%;}
.textsec1{margin: 0 0 0 0;}
}