a, abbr, address, article, aside, audio, b, blockquote, body, canvas,
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary,
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video
{ margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: inherit; font-style: inherit; vertical-align: baseline; }

h1, h2, h3, h4, h5, h6, strong, b {font-weight:400;}
i, em {font-style:normal;}

article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary { display: block; }

mark { background-color: transparent; }

a, ins, del { text-decoration: none; }

table { border-spacing: 0; border-collapse: collapse; }

caption, th { text-align: left; }

q:after, q:before { content: ""; }
:focus { outline: none; }

html {
    background: #fff;
}

body {
    margin: 0;
    padding: 0;
    font: 12px/15px 'Roboto','Avenir Medium',Helvetica,sans-serif;
    font-weight: 400;
}

div.container {
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-weight: 700;
}

strong.subtitle {
    display: block;
    text-align: center;
    font-weight: 700;
}

span.subtitle {
    display: block;
    text-align: center;
    margin-top: 10px;
}

div.contentWrapper {
    display: grid;
}

div.column.left {
    border-right: 1px #e4e4e4 solid;
}

div.column.left.taskbagPage {
    border-right: none;
}

h2, h3, div.myIP {
    font-weight: 700;
}

div.myIP {
    margin-top: 30px;
    text-align: center;
}

strong.bold {
    display: inline;
    font-weight: 700;
}

@media (min-width: 960px) {
    div.container {
        width: 960px;
    }

    h1 {
        margin-top: 50px;
        font-size: 48px;
        line-height: 54px;
    }

    strong.subtitle {
        margin-top: 30px;
        font-size: 36px;
        line-height: 44px;
    }

    span.subtitle {
        font-size: 32px;
        line-height: 40px;
    }

    div.mobileSectionSelector {
        display: none;
    }

    div.contentWrapper {
        grid-template-columns: 1fr 1fr;
        margin: 50px 0 90px 0;
    }
    
    div.column.left {
        padding-right: 80px;
        
    }

    div.column.left.taskbagPage {
        padding-right: 0;
    }
    
    div.column.right {
        padding-left: 80px;
    }

    h2 {
        font-size: 28px;
        line-height: 36px;
    }

    h3, div.myIP {
        margin-top: 30px;
        font-size: 18px;
        line-height: 24px;
    }

    strong.bold {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width:959px) {
    div.container {
        width: 768px;
    }

    h1 {
        margin-top: 50px;
        font-size: 48px;
        line-height: 54px;
    }

    strong.subtitle {
        margin-top: 30px;
        font-size: 36px;
        line-height: 44px;
    }

    span.subtitle {
        font-size: 32px;
        line-height: 40px;
    }

    div.mobileSectionSelector {
        display: none;
    }

    div.contentWrapper {
        grid-template-columns: 1fr 1fr;
        margin: 50px 0 90px 0;
    }
    
    div.column.left {
        padding-right: 40px;
    }
    
    div.column.right {
        padding-left: 40px;
    }

    h2 {
        font-size: 28px;
        line-height: 36px;
    }

    h3, div.myIP {
        margin-top: 30px;
        font-size: 18px;
        line-height: 24px;
    }

    strong.bold {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    body {
        position: relative;

    }

    div.container {
        width: 300px;
    }

    h1 {
        margin-top: 40px;
        font-size: 34px;
        line-height: 42px;
    }

    strong.subtitle {
        margin-top: 20px;
        font-size: 26px;
        line-height: 34px;
    }

    span.subtitle {
        font-size: 24px;
        line-height: 30px;
    }

    div.mobileSectionSelector {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 330px;
        left: 0;
        width: 100vw;
        height: 48px;
        margin-top: 20px;
        background-color: #eeeeee;
    }
    

    div.contentWrapper {
        margin: 118px 0 0 0;
    }

    div.contentWrapper.taskbagPage {
        margin: 40px 0 0 0;
    }

    div.column.left {
        margin-bottom: 266px;
    }

    div.column.left.taskbagPage {
        margin-bottom: 30px;
    }

    div.column.left {
        border: none;
    }

    div.column {
        display: none;
    }
    
    div.column.selected {
        display: block;
    }

    h2 {
        font-size: 22px;
        line-height: 34px;
    }

    h3, div.myIP {
        margin-top: 20px;
        font-size: 16px;
        line-height: 22px;
    }

    strong.bold {
        font-size: 14px;
    }
}


p.download {
    margin-top: 100px;
    text-align: center;
}