html {
    font-family: Gilroy,Helvetica,Arial,sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

div#outline {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 8px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
  font-size:28px;
    line-height: 28px;
    font-weight: bold;
    margin: 0;
}

h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    margin: 5px 0;
}

    h2.altafiber {
        font-size: 16px;
        font-weight: normal;
        line-height: 16px;
        margin: 5px 0;
    }

/* Add to a <p> tag in a col02 when an <h2> is in the col01 and col02 should appear like an h2. 
This style keep the col01 text and col02 text vertically aligned */
p.h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    margin: 5px 0;
}

/* Add to a <p> tag in a col02 when an <h2> is in the col01 and col02 should appear like a <p>. 
This style keep the col01 text and col02 text vertically aligned */
p.h201 {
    font-size: 12px;
    font-weight: normal;
    line-height: 16px !important;
    margin: 5px 0;
}

h3 {
    font-size: 12px;
    font-weight: normal;
    margin: 2px 0;
    line-height: 16px;
}

.col01 h3, .col02 p {
    line-height: 14px;
}

p {
    font-size: 12px;
    margin: 2px 0;
    line-height: 16px;
}

    p.small {
        font-size: 10px;
        margin: 2px 0 0 0;
        line-height: 14px;
        font-weight: bolder;
    }

.indent { /* Wrap around a block of text when it needs to be indented 20px */
    padding: 0 0 0 10px;
}

/* When the browser width is narrower than 400px the .indent block will be flush left. */
@media screen and (max-width: 400px) {
    .indent {
        padding: 0;
    }
}

ul {
    margin: 0;
    padding: 0 0 0 10px;
}

/* When the browser width is narrower than 400px the <ul> will be flush left. */
@media screen and (max-width: 400px) {
    ul {
        padding: 0;
    }
}

ul li {
    font-size: 12px;
    display: inline;
    border-right: 1px solid #000;
    padding: 0 5px 0 0;
    line-height: 17px;
}

    ul li:last-child {
        border-right: 0;
    }

.break-word {
    overflow-wrap: break-word;
}

hr {
    border: 0;
    height: 2px;
    margin: 2px 0;
    background-color: #DDECFE;
}

    hr.hr01 {
        height: 3px;
        background-color: #4294F7;
        margin: 2px 0;
    }

    hr.hr02 {
        height: 1px;
        background-color: #D1D8DB;
        margin: 2px 0;
    }

.col01, .col02 {
    float: left;
}

    .col01 * {
        margin-right: 5px;
    }

.col01 {
    width: 65.66666667%;
    position: relative;
    min-height: 1px;
}

.col02 {
    width: 33.33333333%;
    position: relative;
    min-height: 1px;
}

/* When the browser width is narrower than 375px the columns (col01, col02) will stack */
@media screen and (max-width:374px) {
    iframe:not(#PnbBroadband).col01 {
        width: 100%;
    }

    iframe:not(#PnbBroadband).col02 {
        width: 100%;
    }
}

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

.remLine {
    text-decoration-line: none;
}

@media screen and (min-width: 198px) {
    .h3pad {
        padding-left: 2%;
    }
}