
/* media query */
@media all and (orientation: portrait) {
    .content_div {
        border: 1px solid #d0d0d0;
        margin: 6pt 6pt;
        padding: 12pt;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 12pt;
        box-shadow: inset -12pt 12pt 12pt rgba(0, 0, 0, 0.28), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.75);
        text-align: center;
        overflow:auto;
    }
}

@media all and (orientation: landscape) {
    .content_div {
        margin: 12pt;
        padding: 12pt;
        border: 1px solid #d0d0d0;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 24pt;
        box-shadow: inset -12pt 12pt 12pt rgba(0, 0, 0, 0.25), inset 10pt -10pt 10pt rgba(255, 255, 255, 0.5);
        text-align: center;
        overflow:auto;
    }
}

p {
    font-size: 12pt;
    margin-left: 0pt;
    font-family: 'kindid';
    font-weight: bold;
}

h1 {
    font-size: 14pt;
    font-weight: bold;
    font-family: 'kindid';
    text-decoration: underline;
    padding-left: 3pt;
    margin-bottom: 12pt;
}

.mediac_banner_div {
    width: calc(100% - 24pt);
    /* width: 100%; */
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 0pt;
    padding: 12pt;
    /* margin-left: 12pt;
    margin-right: 12pt; */
}

.mediac_banner_icon {
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

.mediac_banner_logo_cont {
    display: table;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.mediac_banner_logo {
    display: table-cell;
    vertical-align: middle;
    /* display: inline-block; */
    width: 75%;
    /* height: 256pt; */
    /* width: 50%;  */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    /* -webkit-text-stroke: 4px white; */
    text-shadow: 0 0 8pt white, 0 0 12pt white, 0 0 16pt white, 0 0 20pt white;
    font-size: 42pt;
    padding-left:12pt;
    font-weight: bold;
    /* visibility: hidden; */
}

.mediac_banner_store_links_cont {
    display: table;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.mediac_banner_store_links {
    display: table-cell;
    vertical-align: middle;
}

.mediac_banner_store_link {
    width: 100%;
}

.mediac_banner_store_link_small {
    width: 50%;
}

/* todo; stack these up for portrait view??? */

.bullet_boxes {
    /* width: calc(100% - 12pt); */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24pt;
}

.bbpro {
    background-color: #ffe;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

.bbemp {
    background-color: #ffe;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.bbpat {
    background-color: #ffe;
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}


.title {
    width: 100%;
    text-align: center;
}

.drop-cap-paragraph {
    font-size: 12pt;
    margin-bottom: 6pt;
}

.drop-cap-paragraph::first-letter {
    /* font-size: 16pt;
    margin-bottom: 12pt;
    font-weight: bold; */
}

table {
    width: 100%;
    /* border: 1px solid #f00; */
    border-collapse: collapse;
}

th {
    border: 1px dotted #999;
    background-color: #ffb;
}

td {
    border: 1px dotted #999;
    width: 50%;
    text-align: center;
}