body {
    background-color: white;
    color: #010205;
    font-family: Roboto, Verdana, Arial, Sans-Serif;
    font-size: 11.0pt;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
}

div {
    margin: 0;
    border: 0;
    padding: 0;
}

h2 {
    font-size: 160%;
    font-weight: 400;
    color: #33547b;
    margin-top: 1ex;
    margin-bottom: 1.2em;
}

h22 {
    font-size: 160%;
    font-weight: 400;
    color: #33547b;
    margin-top: 1ex;
    margin-bottom: 1.2em;
}

.quickcontent {
    width: 35%;
    text-align: center;
    float: left;
    padding-left: 6.2%;
    padding-top: 32px;
}

.quickvideo {
    width: 21%;
    padding-left: 6%;
    padding-top: 2px;
    float: left;
}

.keytitle {
    color: black;
}

.keycontent {
    font-weight: 100;
    color: #616161;
}

.iconsize {
    width: 30px;
    height: 35px;
}

.tdwidth1 {
    width: 3%;
    align: center;
    padding-left: 0.5%;
}

.tdwidth2 {
    width: 27%;
    align: center;
}

.usecaseicon {
    width: 77px;
    height: 77px;
}

.fontstyle {
    font-size: 100%;
    color: #5e5182;
    font-weight: 100;
    line-height: 1.6;
    padding-left: 5%;
    padding-right: 5%;
}

h1 {
    font-size: 210%;
    font-weight: 400;
    margin-top: 1ex;
    margin-bottom: 0.8ex;
    padding-top: 5px;
    padding-bottom: 5px;
}

h3 {
    font-size: 140%;
    margin-top: 1ex;
    margin-bottom: 1em;
    padding: 3px 0px;
}

h4 {
    font-size: 120%;
    margin-top: 1ex;
    margin-bottom: 1.2em;
}

h5 {
    font-size: 130%;
    font-weight: 400;
}

a {
    color: #07a;
    text-decoration: none;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

a:link {
}

a:visited {
}

a:hover {
    color: #325c80;
    text-decoration: underline;
}

a:active {
}

img {
    border: 0;
}

.container {
    position: relative;
    padding-top: 230px;
    height: auto;
}

.base {
    border-color: transparent;
    width: 100%;
    position: absolute;
    left: 0px;
}

.pad {
    padding-top: 1.5%;
    padding-bottom: 2%;
}

.introback {
    background-color: rgb(237, 243, 250);
    top: 235px;
    height: auto;
}

.introvideoback {
    width: 21%;
    padding-left: 5%;
    float: left;
}

.keyfeatureback {
    background-color: white;
    top: 685px;
    height: auto;
}

.tableback {
    width: 94%;
    border: none;
    padding-left: 5%;
}

.rightBottom {
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-color: #33547b;
    border-bottom-color: #33547b
}

.bottom1 {
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #33547b
}

.right1 {
    border-right-style: dashed;
    border-right-width: 1px;
    border-right-color: #33547b;
}

.quickstartback {
    background-color: rgb(237, 243, 250);
    top: 1180px;
    height: auto;
    padding-bottom: 50px;
}

.usecaseback {
    background-color: white;
    top: 1590px;
    height: auto;
}

.userback {
    background-color: rgb(237, 243, 250);
    top: 2040px;
    height: auto;
    padding-bottom:530px;
    width:94%; padding-left:6%; float:left;
}
.customers-table {
    margin-top:30px;
    height:150px;
    width:100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.customers-row h2 {
    text-transform: capitalize;
    margin-bottom: 0;
    text-align: center; }

.customer-logos-wrapper {
    transition:background 0.5s linear;
    line-height:30px;
    padding-left:3%;
    width:85%;
    text-decoration:none;
    font-size:0.95em;
    cursor: pointer;
}
.cl1-default {
    justify-content: center;
    display: flex;
    align-items: center;
    width:200px;
}
.customer-logos-bar1 {
    padding-left:6%;
    border:3 double #a9c9e2; 
    margin-top:30px;
    margin-bottom:30px;
    float:left; 
}
.customer-logos-bar2 {
    padding-left:6.5%;
    border:3 double #a9c9e2; 
    margin-top:200px;
    float:left;
}
.footertop {
    margin-top:240px;
}
.customer-logos-back-front {
    margin-top:50px;
    height:auto;
    width:94%;
    justify-content: center;
    display: flex;
    align-items: center;
}
.customer-logos-back-end {
    margin-top:10px;
    height:10px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.logo-back1 {
    background:white;
}
.logo-back2 {
    background:#5BA0D8;
}
.logos-background {
    justify-content: center;
    display: flex;
    align-items: center;
    width:200px; 
    height:120px;
    border:1px solid #a9c9e2;
    cursor: pointer;
}
.span-style{
    display:inline-block;
    width:200px;
    line-height:50px;
    text-align:center;
    text-decoration:none;
    font-size:1.6em;  
    cursor: pointer; 
    height:130px;
}

span:hover{
    background-color:#834524; }

.footerback {
    top: 2620px;
    height: auto;
}

#back {
    display: block;
    left: 0px;
    right: 0px;
    position: absolute;
    width: 100%;
    top: 98px;
    height: 317px;
}

#head_navigator {
    color: white;
    padding-right: 50px;
    padding-left: 0;
}

.protitle {
    position: absolute;
    text-align: center;
    background-image: none;
    background-color: transparent;
    border-color: transparent;
    width: 90%;
    height: 50px;
    float: left;
    padding-left: 60px;
    padding-top: 65px;
    color: white;
    font-size: 240%;
}

.prodes {
    position: absolute;
    text-align: center;
    background-image: none;
    background-color: transparent;
    border-color: transparent;
    width: 90%;
    height: 30px;
    float: left;
    padding-left: 60px;
    font-weight: lighter;
    top: 180px;
    color: white;
    font-size: 120%;
}

.max {
    display: block;
    z-index: 6666;
    position: absolute;
    overflow: visible;
    width: 100%;
    height: auto;
    cursor: zoom-out;
    top: 60.96px;
    left: 60px;
}

.min {
    display: block;
    position: absolute;
    cursor: zoom-in;
    overflow: auto;
    transform-origin: 151.141px 138px 0px;
    -webkit-transform-origin: 151.141px 138px 0px;
    -moz-transform-origin: 151.141px 138px 0px;
    left: 74.2%;
    padding-top:37px;
    width: 303px;
    height: 230px;
}

.getstartbutton {
    background-color: rgb(195, 49, 41);
    z-index: 5555;
    left: 42%;
    top: 320px;
    width: 215px;
    height: 43px;
    font-size: 150%;
}

.morestoriesbutton {
    background-color: rgb(52, 79, 105);
    z-index: 5555;
    left: 42%;
    width: 215px;
    height: 43px;
    font-size: 120%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.joinusbutton {
    background-color: rgb(195, 44, 87);
    width: 215px;
    height: 43px;
    font-size: 150%;
}

.redbutton {
    position: absolute;
    text-align: center;
    background-image: none;
    border-image-source: none;
    border-image-width: 1;
    border-image-outset: 0;
    border-color: transparent;
    float: left;
    color: white;
    cursor: pointer;
}

.introvideo {
    width: 303px;
    height: 266px;
}

.introdes {
    width: 44%;
    padding-left: 3%;
    padding-right: 2%;
    padding-top: 3%;
    float: left;
    text-align: center;
}

.joinuspic {
    width: 175px;
    height: 175px;
}

@media only screen and (min-width: 900px) and (max-width: 1330px) {
    .min {
        width: 230px;
        height: 190px;
        left: 74%;
        padding-right: 3%;
        padding-top:28px;

    }

    .introvideo {
        width: 243px;
        height: 210px;
    }

    .introdes {
        width: 44%;
        padding-left: 5%;
        padding-right: 0;
    }

    .joinuspic {
        width: 145px;
        height: 145px;
    }

    .joinusbutton {
        width: 185px;
        height: 33px;
        font-size: 130%;
    }

    h1 {
        font-size: 150%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    h2 {
        font-size: 140%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    h22 {
        font-size: 170%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    h4 {
        font-size: 105%;
        margin-top: 1ex;
        margin-bottom: 1em;
    }

    .fontstyle {
        font-size: 85%;
    }

    h3 {
        font-size: 105%;
    }

    .getstartbutton {
        width: 185px;
        height: 33px;
        font-size: 130%;
        top: 330px;
    }

    .keycontent {
        font-size: 90%;
        font-weight: 100;
    }

    .quickstartback {
        top: 1130px;
    }

    .usecaseback {
        top: 1470px;
    }

    .userback {
        top: 1950px;
    }

    .footerback {
        top: 2570px;
        height: auto;
    }
    .logo-back2 {
        float:left;
    }
    .logo-back1 {
        float:left;
    }
    .customer-logos-back-front {
        margin-top:30px;
        height:auto;
        padding-left:4%;
        padding-right:4%;
        width:86%;
        display: inline-block;
    }
    .customer-logos-bar1 {
        margin-top:30px;
        margin-bottom:30px;
    }
    .customer-logos-bar2 {
        margin-top:340px;
    }
    .footertop {
        margin-top:300px;
    }
}

@media only screen and (min-width: 820px) and (max-width: 900px) {
    .min {
        width: 208px;
        height: 170px;
        left:70%;
        padding-top: 11px;
        padding-right:4%;
    }

    .introvideo {
        width: 223px;
        height: 180px;
    }

    .introdes {
        width: 44%;
        padding-left: 5%;
        padding-right: 0;
    }

    .joinuspic {
        width: 135px;
        height: 135px;
    }

    .joinusbutton {
        width: 160px;
        height: 33px;
        font-size: 110%;
    }

    h1 {
        font-size: 150%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    h2 {
        font-size: 120%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    h4 {
        font-size: 105%;
        margin-top: 1ex;
        margin-bottom: 1em;
    }

    .fontstyle {
        font-size: 70%;
    }

    h3 {
        font-size: 105%;
    }

    .keycontent {
        font-size: 90%;
        font-weight: 100;
    }

    .quickstartback {
        top: 1130px;
    }

    .usecaseback {
        top: 1470px;
    }

    .userback {
        top: 1950px;
        padding-bottom:590px;
    }

    .footerback {
        top: 2640px;
        height: auto;
    }
    .logos-background {
        width:180px;
    }
    .logo-back2 {
        float:left;
    }
    .logo-back1 {
        float:left;
    }
    .cl1-default {
        justify-content: center;
        display: flex;
        align-items: center;
        width:180px;
    }
    .customer-logos-back-front {
        margin-top:30px;
        height:auto;
        padding-left:4%;
        padding-right:4%;
        width:86%;
        display: inline-block;
    }
    .customer-logos-bar1 {
        margin-top:30px;
        margin-bottom:30px;
    }
    .customer-logos-bar2 {
        margin-top:280px;
    }
    .footertop {
        margin-top:285px;
    }  
}

@media only screen and (min-width: 600px) and (max-width: 820px) {
    #back {
        height: 200px;
    }

    .introback {
        top: 118px;
    }

    .introvideoback {
        width: 90%;
        padding-left: 5%;
    }

    .iconsize {
        width: 10px;
        height: 17px;
    }

    .tdwidth1 {
        width: 3%;
        align: center;
        padding-left: 0.5%;
    }

    .tdwidth2 {
        width: 27%;
        align: center;
    }

    .quickcontent {
        width: 90%;
        text-align: center;
    }

    .quickvideo {
        width: 90%;
        padding-top: 2px;
    }

    .tableback {
        width: 94%;
        border: none;
        padding-left: 5%;
    }

    .usecaseicon {
        width: 37px;
        height: 37px;
    }

    .protitle {
        width: 90%;
        top: 130px;
        height: 40px;
        float: left;
        padding-left: 2.8%;
        top: -6px;
        color: white;
        font-size: 160%;
    }

    .joinusbutton {
        display: none;
    }

    .prodes {
        top: 100px;
        padding-left: 3%;
        font-size: 85%;
    }

    .min {
        display: none;
    }

    .introvideo {
        width: 223px;
        height: 180px;
    }

    .introdes {
        width: 93%;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 0;
    }

    h22 {
        font-size: 110%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    .joinuspic {
        display: none;
    }

    .getstartbutton {
        width: 190px;
        top: 255px;
        height: 30px;
        float: left;
        margin-left: 25%;
        color: white;
        font-size: 120%;
        left: 2.8%;
    }

    .keycontent {
        font-size: 64%;
        font-weight: 100;
    }

    h1 {
        font-size: 140%;
        font-weight: 400;
        margin-top: 0.8ex;
        margin-bottom: 0.8em;
        padding: 5px 5px;
    }

    h2 {
        font-size: 80%;
        margin-top: 0.8ex;
        margin-bottom: 0.6em;
    }

    h4 {
        font-size: 75%;
        margin-top: 1ex;
        margin-bottom: 1em;
    }

    .fontstyle {
        font-size: 70%;
    }

    h3 {
        font-size: 105%;
    }

    .min {
        display: none;
    }

    .quickstartback {
        top: 1050px;
    }
    .logo-back2 {
        float:left;
    }
    .logo-back1 {
        float:left;
    }
    .usecaseback {
        top: 1420px;
    }

    .userback {
        top: 1840px;
        padding-bottom:560px;
    }

    .footerback {
        top: 2500px;
        height: auto;
    }
    .customers-table {
        padding-left:3%;
        padding-right:3%;
        width:94%;
    }
    .logos-background {
        width:180px;
    }
    .customer-logos-bar1 {
        padding-left:6%;
        margin-top:150px;
        margin-bottom:10px;
        float:left;
    }
    .customer-logos-bar2 {
        margin-top: 600px;
        margin-bottom:40px;
    }
    .cl1-default {
        justify-content: center;
        display: flex;
        align-items: center;
        width:180px;
    }
    .customer-logos-wrapper {
        line-height:24px;
        font-size:0.9em;

    }
    .customer-logos-back-front {
        margin-top:30px;
        height:auto;
        padding-left:4%;
        padding-right:4%;
        width:86%;
        display: inline-block;
    }
    .footertop {
        margin-top:370px;
    }
}
@media only screen and (min-width: 430px) and (max-width: 600px) {
    #back {
        height: 200px;
    }

    .introback {
        top: 118px;
    }

    .introvideoback {
        width: 90%;
        padding-left: 5%;
    }

    .iconsize {
        width: 10px;
        height: 17px;
    }

    .tdwidth1 {
        width: 3%;
        align: center;
        padding-left: 0.5%;
    }

    .tdwidth2 {
        width: 27%;
        align: center;
    }

    .quickcontent {
        width: 90%;
        text-align: center;
    }

    .quickvideo {
        width: 90%;
        padding-top: 2px;
    }

    .tableback {
        width: 94%;
        border: none;
        padding-left: 5%;
    }

    .usecaseicon {
        width: 37px;
        height: 37px;
    }

    .protitle {
        width: 90%;
        top: 130px;
        height: 40px;
        float: left;
        padding-left: 2.8%;
        top: -6px;
        color: white;
        font-size: 160%;
    }
    .joinusbutton {
        display: none;
    }

    .prodes {
        top: 100px;
        padding-left: 3%;
        font-size: 85%;
    }

    .min {
        display: none;
    }

    .introvideo {
        width: 223px;
        height: 180px;
    }

    .introdes {
        width: 93%;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 0;
    }

    h22 {
        font-size: 110%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }
    .joinuspic {
        display: none;
    }

    .getstartbutton {
        width: 190px;
        top: 255px;
        height: 30px;
        float: left;
        margin-left: 25%;
        color: white;
        font-size: 120%;
        left: 2.8%;
    }

    .keycontent {
        font-size: 64%;
        font-weight: 100;
    }

    h1 {
        font-size: 140%;
        font-weight: 400;
        margin-top: 0.8ex;
        margin-bottom: 0.8em;
        padding: 5px 5px;
    }

    h2 {
        font-size: 80%;
        margin-top: 0.8ex;
        margin-bottom: 0.6em;
    }
    h4 {
        font-size: 75%;
        margin-top: 1ex;
        margin-bottom: 1em;
    }

    .fontstyle {
        font-size: 70%;
    }

    h3 {
        font-size: 105%;
    }

    .min {
        display: none;
    }

    .quickstartback {
        top: 1050px;
    }

    .usecaseback {
        top: 1420px;
    }

    .userback {
        top: 1840px;
        padding-bottom:510px;
    }
    .footerback {
        top:2630px; 
    }
    .logos-background {
        width:155px;
    }
    .cl1-default {
        justify-content: center;
        display: flex;
        align-items: center;
        width:155px;
    }
    .customer-logos-back-front {
        margin-top:30px;
        height:auto;
        padding-left:4%;
        padding-right:4%;
        width:86%;
        display: inline-block;
    }
    .customer-logos-bar1 {
        padding-left:6%;
        margin-top:120px;
        margin-bottom:20px;
        float:left;
    }
    .customer-logos-bar2 {
        margin-bottom:-120px;
    }
    .customers-table {
        margin-top:30px;
        margin-bottom:30px;
        height:auto;
        padding-left:10%;
        padding-right:10%;
        width:80%;
        justify-content: none;
        display: block;
        align-items: none;
    }
    .logos-background {
        width:155px;
    }
    .cl1-default {
        justify-content: center;
        display: flex;
        align-items: center;
        width:155px;
    }
    .logo-back2 {
        float:left;
    }
    .logo-back1 {
        float:left;
    }
    .customer-logos-wrapper {
        line-height:24px;
        font-size:0.8em;

    }
}
@media only screen and (max-width: 430px) {
    #back {
        height: 200px;
    }

    .introback {
        top: 118px;
    }

    .introvideoback {
        width: 90%;
        padding-left: 5%;
    }

    .iconsize {
        width: 10px;
        height: 17px;
    }

    .tdwidth1 {
        align: left;
        padding-left: 0.5%;
    }

    .tdwidth2 {
        align: center;
    }

    .quickcontent {
        width: 90%;
        text-align: center;
    }

    .quickvideo {
        width: 90%;
        padding-top: 5px;
    }

    .tableback {
        border: none;
        padding-left: 1px;
    }

    .usecaseicon {
        width: 37px;
        height: 37px;
    }

    .protitle {
        width: 90%;
        top: 130px;
        height: 40px;
        float: left;
        padding-left: 2.8%;
        top: -6px;
        color: white;
        font-size: 160%;
    }

    .joinusbutton {
        display: none;
    }

    .prodes {
        top: 100px;
        padding-left: 3%;
        font-size: 85%;
    }

    .min {
        display: none;
    }

    .introvideo {
        width: 223px;
        height: 180px;
    }

    .introdes {
        width: 93%;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 0;
    }

    h22 {
        font-size: 110%;
        margin-top: 1ex;
        margin-bottom: 0.8em;
    }

    .joinuspic {
        display: none;
    }

    .getstartbutton {
        width: 190px;
        top: 255px;
        height: 30px;
        float: left;
        margin-left: 25%;
        color: white;
        font-size: 120%;
        left: 2.8%;
    }

    .keycontent {
        font-size: 64%;
        font-weight: 100;
    }

    h1 {
        font-size: 140%;
        font-weight: 400;
        margin-top: 0.8ex;
        margin-bottom: 0.8em;
        padding: 5px 5px;
    }

    h2 {
        font-size: 80%;
        margin-top: 0.8ex;
        margin-bottom: 0.6em;
    }
    h4 {
        font-size: 75%;
        margin-top: 1ex;
        margin-bottom: 1em;
    }
    .fontstyle {
        font-size: 70%;
    }
    h3 {
        font-size: 105%;
    }
    .min {
        display: none;
    }
    .quickstartback {
        top: 1230px;
    }
    .usecaseback {
        top: 1600px;
    }
    .userback {
        top: 2200px;
        width:94%; 
        float:left;
        padding-bottom:470px;
    }
    .footerback {
        top: 3010px;
        height: auto;
    }
    .customer-logos-back-front {
        margin-top:30px;
        height:auto;
        width:98%;
        display: inline-block;
    }
    .customer-logos-bar1 {
        padding-left:6%;
        margin-top:120px;
        margin-bottom:20px;
        float:left;
    }
    .customer-logos-bar2 {
        margin-top:350px;
    }
    .customers-table {
        margin-top:30px;
        margin-bottom:30px;
        height:auto;
        padding-left:6%;
        padding-right:5.7%;
        width:88.3%;
        justify-content: none;
        display: block;
        align-items: none;
    } 
    .logos-background {
        width:145px;
    }
    .cl1-default {
        justify-content: center;
        display: flex;
        align-items: center;
        width:145px;
    }
    .logo-back2 {
        float:left;
    }
    .logo-back1 {
        float:left;
    }
    .customer-logos-wrapper {
        line-height:24px;
        font-size:0.7em;
        
    }
}
