body {
    font-family: Segoe UI;
    margin: 0px;
    padding: 0px;
}

body.page-margin-30 {
    margin: 30px;
}

table, th, td {
    border: 1px solid black;
    border-radius: 10px;
    width: fit-content;
}

th {
    background-color: #56A0E0;
    font-style: oblique;
    color: black;
}
#firstRow {
    background-color: #56A0E0;
    font-style: oblique;
    color: black;
}
td {
    background-color: #FFFFFF;
    border: 1px dotted black;
    text-align: center;
}
td > b {
    font-size: 10px;
    display: inline-block;
    line-height: 10px;
}

html,
body { height: 100%; }

header {
    background-color: #55A0E0;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 4638.9 651.6' style='enable-background:new 0 0 4638.9 651.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2355A0E0;%7D .st1%7Bfill:none;%7D .st2%7Bfill:%230058A8;%7D .st3%7Bfill:%23328BD8;%7D .st4%7Bfill:%23B6DCF1;%7D .st5%7Bopacity:0.2;fill:url(%23SVGID_1_);enable-background:new ;%7D%0A%3C/style%3E%3Crect y='1.1' class='st0' width='4640' height='646.3'/%3E%3Cpath class='st1' d='M3987.8,323.6L4310.3,1.1h-65.6l-460.1,460.1c-17.5,17.5-46.1,17.5-63.6,0L3260.9,1.1H0v646.3h3660.3 L3889,418.7c17.5-17.5,46.1-17.5,63.6,0l228.7,228.7h66.6l-260.2-260.2C3970.3,369.8,3970.3,341.1,3987.8,323.6z'/%3E%3Cpath class='st2' d='M3784.6,461.2L4244.7,1.1h-983.9l460.1,460.1C3738.4,478.7,3767.1,478.7,3784.6,461.2z'/%3E%3Cpath class='st3' d='M4640,1.1h-329.8l-322.5,322.5c-17.5,17.5-17.5,46.1,0,63.6l260.2,260.2H4640L4640,1.1L4640,1.1z'/%3E%3Cpath class='st4' d='M3889,418.8l-228.7,228.7h521.1l-228.7-228.7C3935.2,401.3,3906.5,401.3,3889,418.8z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='3713.7576' y1='438.1175' x2='3911.4084' y2='14.2535' gradientTransform='matrix(1 0 0 -1 0 641.3969)'%3E%3Cstop offset='0' style='stop-color:%23FFFFFF;stop-opacity:0.5'/%3E%3Cstop offset='1' style='stop-color:%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpath class='st5' d='M3952.7,124.5c-17.5-17.5-46.1-17.5-63.6,0l-523,523h1109.6L3952.7,124.5z'/%3E%3C/svg%3E%0A");
    background-position: right;
    background-repeat: no-repeat;
    background-size: 100%;
    color: white;
    display: inline-block;
    font-size: 44px;
    height: 120px;
    padding: 30px 0 40px 0px;
    width: 100%;
}

.header-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20150.2%20125%22%20style%3D%22enable-background%3Anew%200%200%20150.2%20125%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Anone%3B%7D%0A%09.st1%7Bfill%3A%23FFFFFF%3B%7D%0A%3C/style%3E%0A%3Crect%20x%3D%220.5%22%20class%3D%22st0%22%20width%3D%22149.7%22%20height%3D%22125%22/%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M59%2C102.9L21.8%2C66c-3.5-3.5-3.5-9.1%2C0-12.5l37-36.5l2.9%2C3l-37%2C36.4c-1.8%2C1.8-1.8%2C4.7%2C0%2C6.6l37.2%2C37L59%2C102.9z%22%0A%09%09/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M92.5%2C102.9l-3-3l37.2-37c0.9-0.9%2C1.4-2%2C1.4-3.3c0-1.2-0.5-2.4-1.4-3.3L89.5%2C20l2.9-3l37.2%2C36.4%0A%09%09c1.7%2C1.7%2C2.6%2C3.9%2C2.6%2C6.3s-0.9%2C4.6-2.6%2C6.3L92.5%2C102.9z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M90.1%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C98.1%2C64.7%2C94.4%2C68.4%2C90.1%2C68.4z%0A%09%09%20M90.1%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S91.9%2C56.5%2C90.1%2C56.5z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M61.4%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C69.5%2C64.7%2C65.8%2C68.4%2C61.4%2C68.4z%0A%09%09%20M61.4%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S63.3%2C56.5%2C61.4%2C56.5z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    height: 140px;
    vertical-align: middle;
    width: 140px;
}

.header-text {
    color: #FFFFFF;
    display: inline-block;
    font-family: "Segoe UI";
    font-size: 72px;
    font-weight: 300;
    letter-spacing: 0.35px;
    line-height: 96px;
    padding-left: 1%;
    vertical-align: middle;
}

.header-inner-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
    min-width: 480px;
    vertical-align: middle;
}

.header-inner-container::after {
    clear: both;
    content: "";
    display: table;
}

.main-content-area { padding-left: 30px; }

.content-title {
    color: #000000;
    font-family: "Segoe UI";
    font-size: 46px;
    font-weight: 300;
    line-height: 62px;
}

.main-text {
    color: #808080;
    font-family: "Segoe UI";
    font-size: 24px;
    font-size: 24px;
    font-weight: 200;
    line-height: 32px;
}

.main-text-p1 {
    padding-bottom: 28px;
    padding-top: 48px;
}

.endpoint {
    color: #808080;
    font-family: "Segoe UI";
    font-size: 24px;
    font-weight: 200;
    height: 32px;
    line-height: 32px;
    padding-top: 28px;
    width: 571px;
}

.how-to-build-section {
    padding-left: 30px;
    padding-top: 20px;
}

.how-to-build-section > h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.35px;
    line-height: 22px;
    margin: 0 0 24px 0;
    text-transform: uppercase;
}

.step-container {
    align-items: stretch;
    display: flex;
    position: relative;
}

.step-container dl {
    border-left: 1px solid #A0A0A0;
    display: block;
    margin: 0;
    padding: 0 24px;
}

.step-container dl > dt::before {
    background-color: white;
    border: 1px solid #A0A0A0;
    border-radius: 100%;
    content: '';
    height: 11px;
    left: 47px;
    position: absolute;
    width: 11px;
}

.step-container dl > .test-bullet::before { background-color: blue; }

.step-container dl > dt {
    display: block;
    font-size: inherit;
    font-weight: bold;
    line-height: 20px;
}

.step-container dl > dd {
    font-size: inherit;
    line-height: 20px;
    margin-left: 0;
    padding-bottom: 32px;
}

.step-container:last-child dl { border-left: 1px solid transparent; }

.ctaLink {
    background-color: transparent;
    border: 1px solid transparent;
    color: #006AB1;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    white-space: normal;
}

.ctaLink:focus { outline: 1px solid #00bcf2; }

.ctaLink:hover { text-decoration: underline; }

.step-icon {
    display: flex;
    height: 38px;
    margin-right: 15px;
    width: 38px;
}

.step-icon > div {
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
}

.ms-logo-container {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
    min-width: 580px;
    right: 0;
    transition: bottom 400ms;
}

.ms-logo {
    background-image: url('/sesteklogo.png');
    float: right;
}

.ms-logo-container > div {
    background-repeat: no-repeat;
    min-height: 60px;
    width: 177px;
}

.row {
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
    min-width: 480px;
    padding: 90px 0px 0 20px;
}

.column {
    float: left;
    padding-right: 20px;
    width: 45%;
}

.row:after {
    clear: both;
    content: "";
    display: table;
}

a { text-decoration: none; }

.download-the-emulator {
    color: #0063B1;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    padding-bottom: 70px;
}

.remove-frame-height { height: 10px; }

.bordered-row { border-bottom: 1px solid #ddd; }

.full-width-table { width: 100%; }

@media only screen and (max-width: 1300px) {
    .ms-logo { padding-top: 30px; }

    .header-text { font-size: 40px; }

    .column {
        float: none;
        padding-top: 30px;
        width: 100%;
    }

    .ms-logo-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 650px;
        min-width: 480px;
        padding-top: 30px;
    }

    .row {
        margin-left: auto;
        margin-right: auto;
        max-width: 650px;
        min-width: 480px;
        padding: 20px 0px 0 20px;
    }
}

@media only screen and (max-width: 1370px) {
    header {
        background-color: #55A0E0;
        background-size: auto 200px;
    }
}

@media only screen and (max-width: 1230px) {
    header {
        background-color: #55A0E0;
        background-size: auto 200px;
    }

    .header-text { font-size: 44px; }

    .header-icon {
        height: 120px;
        width: 120px;
    }
}

@media only screen and (max-width: 1000px) {
    header {
        background-color: #55A0E0;
        background-image: none;
    }
}

@media only screen and (max-width: 632px) {
    .header-text { font-size: 32px; }

    .row {
        max-width: 490px !important;
        min-width: 410px !important;
        padding: 10px 0px 0 10px;
    }

    .endpoint { font-size: 25px; }

    .main-text { font-size: 20px; }

    .step-container dl > dd { font-size: 14px; }

    .column { padding-right: 5px; }

    .header-icon {
        height: 110px;
        width: 110px;
    }
}