* { margin:0; padding:0; box-sizing: border-box;}
@font-face{font-family:'Invention';font-style:normal;font-weight:400;src:local(''),url('Invention_W_Rg.woff') format('woff'),url('Invention_W_Rg.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'InventionLt';font-style:normal;font-weight:300;src:local(''),url('Invention_W_Lt.woff') format('woff'),url('Invention_W_Lt.woff2') format('woff2');font-display:swap;}
html {width:100%; height:100%; }
body{ font-family:'InventionLt';}
.warp{ width: 1090px; margin: 0 auto; }
.top{ background: #2e58b7; height:201px; }
.logo-home{background: url(../images/Logo.svg);background-repeat: no-repeat;background-size: contain;width:270px;
  height:200px;overflow: hidden;text-indent: -200px;background-position: left center;float: left; }
.logo-home a{ text-decoration: none; display: block; height: 100%;}
main{background:#fff;padding-bottom:100px;padding-top:120px;}
.item-page img.sense-icon{ max-width: 665px;width:100%;margin: 0 auto 42px;display: block;height:auto}
.item-page h1{ font-weight:normal;font-size:50px; text-align: center;}
.item-page h1 span{ font-weight: 400;}
.item-page .sense-home-text{font-size:19px;color: #000000;line-height: 25px;text-align: center;margin-top: 14px;margin-bottom: 60px;padding: 0 61px;}
.item-page ul{display: flex;width: 100%;flex-wrap: wrap;justify-content: space-between;}
.item-page li{ width: 32%;text-align: center;list-style: none;height: 200px;}
.item-page li.tutorials{background: url(../images/box1.svg) no-repeat;position: relative;background-size: contain;}
.item-page li.tutorials a{background: url(../images/tutorials.svg) no-repeat;background-position: center 29%;background-size:31%; }
.item-page li.videos{background: url(../images/box2.svg) no-repeat;position:relative;background-size: contain;}
.item-page li.videos a{ background: url(../images/video.svg) no-repeat;background-position: center 29%;background-size:29%;  }
.item-page li.user-guides{background: url(../images/box3.svg) no-repeat;  position: relative;background-size: contain;}
.item-page li.user-guides a{ background: url(../images/guides.svg) no-repeat;background-position: center 29%;background-size: 30%;  }
.item-page li a{ text-decoration: none;color: #fff;font-family:'Invention';font-size: 32px;text-transform: uppercase;position: relative;z-index: 10;display: block;height: 100%;padding-top: 130px;}
.webapp{float: right;margin-top: 0;position: relative;width: 700px;height: 200px;}
.webapp:after{content:"";background: url(../images/top-Element.svg) no-repeat right top;position: absolute;top: 0;right: 0;z-index: 0;width: 100%;height: 280px;background-size:contain;}
.webapp a{ text-decoration: none;background:url(../images/Icon-V.svg) no-repeat left center;padding-left: 25px;
  font-size: 20px;color: #000;z-index: 10;position: absolute;width: 360px;display: block;bottom: 30px;text-align: center;right: 0;left: 0;margin: 0 auto;background-size: 27px;}
.information-icon{ background: url(../images/Icon-info.svg) no-repeat;position: absolute;bottom: 43px;cursor: pointer;right: 148px;z-index: 1000;background-size: contain;width: 26px;height: 26px; }
.tooltip:before,
.tooltip:after {
 display: block;
opacity: 0;
pointer-events: none;
position: absolute;
left: -397px;
width: 342px;
}
.tooltip:after {
border-left: 6px solid #457cfb;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
content: '';
height: 0;
top: 7px;
left: -22px;
width: 0;
}
.tooltip:before {
 background: #457cfb;
color: #fff;
content: attr(data-title);
font-size: 13px;
padding:20px;
top: -21px;
line-height: 17px; 
}

.tooltip.fade:after,
.tooltip.fade:before {
transform: translate3d(50px,0,0);
transition: all .15s ease-in-out;
}
.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.tm{position: relative;font-size: 15px;display: inline-block;vertical-align: super;}
nav{ background:#457cfb;height:148px;position: relative;z-index: 100}
nav ul{display: flex;flex-wrap: wrap;justify-content: flex-start;width: 100%;padding-top:40px;}
nav li{list-style: none; margin-right:15px; font-size:24px;border: 2px solid #6492fd;border-radius: 20px;padding: 0 20px;}
nav li a{ color: #fff; text-decoration: none;transition: all 0.1s ease-in-out;display: block;padding-left:55px;line-height:62px; }
nav li.active{background: #2e58b7}
nav li.tutorials a{ background: url(../images/tutorials.svg) no-repeat left center;background-size: 32%; }
nav li.videos a{ background: url(../images/video.svg) no-repeat left center;background-size: 31%; }
nav li.documentation a{ background: url(../images/guides.svg) no-repeat left center;background-size:21%; }
.sense-table{width: 100%;margin-top: -40px;}
.sense-table li{border-bottom:2px dashed #2e58b7;padding-bottom: 20px; margin-bottom: 20px; list-style: none;display: flex;width: 100%;flex-wrap: wrap;justify-content: space-between;}
.sense-table li:last-child{ border-bottom: none; }
.sense-table .table-title{font-size:29px;width: 38%;}
.sense-table .table-title a{text-decoration: none; color: #000; transition: color 0.1s ease-in-out; }
.sense-table .table-title a:hover{color:#2e58b7;}
.sense-table .table-desc{width: 40%; line-height: 24px; font-size: 16px; color: #000000; }
.sense-table .table-desc p,.sense-table .table-desc span{font-size: 16px !important; color: #000000 !important;font-family: 'InventionLt' !important;}
.sense-table .table-link{ width: 10%; }
.sense-table .table-link a{ text-decoration: none; background: url(../images/WATCH-NOW.svg) no-repeat; display: block;color: #2e58b7;text-align: center;height: 80px;padding-top: 57px;background-position: center top;text-indent: 230px;
  overflow: hidden;background-size: 65%;transition:all 0.1s ease-in-out; }
  .sense-table .table-link a:hover{background-size: 69%}
.sense-table .table-link.downloadnow{ width: 11%; }
.sense-table .table-link.downloadnow a{background: url(../images/Download.svg) no-repeat center top;background-size:55%}
.sense-table .table-link.downloadnow a:hover{background-size: 59%}
#sbox-content iframe{ width: 100%; height: 100%; }
footer{ background: url(../images/footer.png) no-repeat; height:250px; color: #fff;padding-top:26px;position: relative;overflow: hidden;}
footer .warp:after{content:"";background:url(../images/footer-element.svg) no-repeat;background-size: contain;
  position: absolute;bottom: -54px;right: 0;width: 260px;height: 110px;}
footer .warp{position:relative;}
.footer-logo{width:200px;height:auto;display:inline-block;vertical-align:middle;}
.footer-logo img{width:100%}
.footer-menu{display:inline-block;margin-left:50px;}
.footer-menu ul {display: flex;flex-wrap: wrap;justify-content: flex-start;}
.footer-menu li {list-style: none;}
.footer-menu li a{color: #fff;text-decoration: none;border-left: 1px solid #fff;padding-left: 10px;height: 15px;display: block;line-height: 12px;margin-left: 11px;}
.footer-menu li:first-child a{border:none}
.c{margin-top: 70px}
@media screen and (max-width:1080px) {
.warp{ width: 100%; padding: 0 10px; }
.webapp{height: 21vw;width: 66vw;}
.information-icon{right:13vw;}
.webapp a{font-size:2vw;width: 37vw;}
}
@media screen and (max-width:900px) {
  .item-page li a{padding-top: 12vw;font-size: 28px}
}
@media screen and (max-width:768px) {
main{min-height: auto;}
html{ height: auto; }
.logo-home{width: 40%}
.webapp{width: 60%}
.item-page li{width: 33%;height: 142px;}
.item-page li a{font-size:24px}
}
@media screen and (max-width:600px) {
.top{height:100px}
 .logo-home {
    width: 100%;
    text-align: center;
    float: none;
    background-position: center center;text-indent: -10000px;
    overflow: hidden;background-size: 30%;height: 100px;
  }
.webapp{display: none;}
main{padding-top:60px}
nav{height: 110px}
nav ul{justify-content: space-between;padding-top: 24px}
nav li{width: 32%;margin-right: 0;padding: 0 10px;font-size: 16px}
nav li a{background-size: 20% !important;text-align: center;padding-left: 0;}
.sense-table li{text-align: center;}
.sense-table .table-title,.sense-table .table-desc,.sense-table .table-link{width: 100%}
.sense-table .table-link a{text-indent: 1230px;background-size: 60px;
  overflow: hidden;}
}
@media screen and (max-width:414px) {
  nav li a {
    background-size: 20% !important;
    text-align: center;
    background-position: center 8px !important;
    padding-top: 8px;
  }
}