/* BIG BOY VARIABLES */
    :root {
        /* colors */
        --bg-color: #eee;
        --main-bg: #fff;
        --lighter-bg: #fff;
        /* borders & backgrounds */
        --border0: #000;
        --border1: #777;
        --border2: #bfbfbf;
        --border3: #333;
        --trans: #ffffff00;
        /* shadows & borders */
        --shadow0: #aaa; 
        --shadow1: #bbb;
        --shadow2: #ccc;
        --shadow3: #ddd;
        /* text */
        --text-color: #000000;
        
        /* text */
        /*rule of thumb
        Title = >/=2x height Subtitle = >/=2x height Regular */
        --title-font: 'Roboto-Regular', monospace;
        --surtitle-font: 'NewsCycle-Bold';
        --subtitle-font: 'NewsCycle-Bold';
        --body-font: 'NewsCycle-Regular'; /* check what this effects */
        --heading-font: 'pgothic', monospace;
        --web-font: 'IBMPlexMono-Regular', monospace;
        --btn-classic-font: 'NewsCycle-Regular';
        --btn-nav-font: 'NewsCycle-Regular';

        --title-font-size: 16px;
        --surtitle-font-size: 1.25rem; /* was 1rem */
        --surtitle-font-weight: 700;
        --subtitle-font-size: 1.25rem; /* was 1rem */
        --subtitle-font-weight: 700;
        --large-font-size: 25px;    /* doesnt get used, split up between sur- & sub */
        --base-font-size: 1rem;      /* rename to normal */
        --small-font-size: 0.75rem;    /* for the credits text, RENAME*/
        --ul-font-size: 0.75rem;       /* gets used once, CHECK */
        --table-font-size1: 1rem;   /* gets used */
        --footer-font-size: 1rem;   /* gets used */
        
        /* layout stuff */
        --main-min-width: 1rem; /* keep at 1 to ensure correct phone scaling */
        --main-max-width: 60rem;
        --main-height: 1200px;
        --horizontal-padding: 19px; /* was 14px once */
        --vertical-padding: 7px; /* test some stuff with top & bottom */
        --vertical-element-padding: 10px;
        --ul-width: 300px; /* does this really get used ? */
    }
    
    html {
        font-size: 14px;
        line-height: 1.5rem;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-right: calc(100% - 100vw); /* this fixes scaling, do not change */
        background-color: var(--bg-color);
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    
    body {
        font-family: var(--body-font);
        background-color: var(--bg-color);
        padding: 0px;
        font-size: var(--base-font-size);
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);
        overflow-x: hidden;
        display: block;
        float: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 28px;
        margin-bottom: 28px;
        padding-right: 2px;
        padding-bottom: 2px;
    }   
    
    main {
        display: block;
        background-color: var(--main-bg);
        background-position: center;
        max-width: var(--main-max-width);
        min-width: var(--main-min-width);
        /* possibly not needed
        min-height: var(--main-height);
        */
        margin: 0;
        border-top: 1px solid var(--border1);
        border-right: 1px solid var(--border1);
        border-bottom: 1px solid var(--border1);
        border-left: 1px solid var(--border1);
        padding-left: var(--horizontal-padding);
        padding-right: var(--horizontal-padding);
        padding-bottom: var(--vertical-padding);
        padding-top: var(--vertical-padding);
        position: relative;
        box-shadow: 2px 2px var(--shadow2)
    }
    
    .title-text {
        font-family: var(--title-font);
        font-size: var(--title-font-size);
        line-height: 1.2rem;
        font-stretch: condensed;
        text-align: left;
        display: flex;
        justify-content: left;
        /* align-items: left; */
        padding-right: 0rem; /* 1rem; leaving this out for now*/
        margin-right: auto;
        margin-left: auto;
        white-space: nowrap;
        text-decoration: none;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    }
    
    .title-banner {
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 0px;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -ms-flex-align: center;
        align-items: center;
        border: 1px solid black;
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    header {
        display: block;
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    nav {
        display: block;
    }

    footer {
        display: flex;
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);
        text-align: right;
        font-size: var(--footer-font-size);
        font-family: var(--heading-font);
        font-stretch: condensed;
        color: var(--text-color);
        left: var(--horizontal-padding);
        bottom:var(--vertical-padding);
        justify-content: right;
    }

    .dev {
        font-style: normal;
        font-stretch: condensed;
        font-family:  var(--body-font);
        font-size: var(--small-font-size);
        color: var(--shadow0);
        text-align: left;
        max-width: 100%;
        -ms-flex: 1;
        flex: 1;
    }

    .web {
        background: #79002c;
        color: var(--main-bg);
        font-family:var(--web-font);
        font-weight: 400;
        font-style: normal;
        line-height: 1.2rem;
        padding-right: .2rem;
        padding-left: .3rem;
        letter-spacing: .1rem;
        text-transform: uppercase;
        border: 1px dotted var(--border0);
    }

    .ver {
        background: #ffffff;
        color: rgb(0, 0, 0);
        font-family:var(--web-font);
        font-weight: 400;
        font-style: normal;
        line-height: 1.2rem;
        padding-right: .2rem;
        padding-left: .3rem;
        letter-spacing: .1rem;
        text-transform: uppercase;
        border: 1px dotted var(--border0);
    }

    /* HEADERS & DIVIDING LINES */

    hr {
        overflow: visible;
        box-sizing: content-box;
        height: 0;
        height: 1px;
        margin: .5rem 0 .5rem;
        margin-bottom: 1rem;
        color: var(--border3);
        border: none;
        border-top: 1px dashed var(--border0)
    }

    hr.solid {
        overflow: visible;
        box-sizing: content-box;
        height: 0;
        height: 1px;
        margin: .5rem 0 .5rem;
        margin-bottom: .25rem;
        color: var(--border0);
        border: none;
        border-top: none;
        border-bottom: 1px solid var(--border0)
    }

    .main-seperator {
        border: none;
        background: radial-gradient(var(--border1) .5px,var(--trans) 1px) 0 0/3px 3px,var(--main-bg);
        height: 1.1rem;
        max-height: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .seperator {
        font-family: var(--heading-font);
        font-size: 20px;
        text-align: left;
        border-bottom: 1px dashed var(#777)
    }
    
    .argh {
        display: flex;
        justify-content: right;
        align-items: right;
    }

    .surtitle0 {
        text-align: left;
        margin: auto;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: .5rem;
        color: inherit;
    }
    
    .subtitle0 {
        font-family: var(--subtitle-font);
        font-size: var(--subtitle-font-size);
        font-weight: var(--subtitle-font-weight);
        text-align: left;
        margin: auto;
        line-height: 1.2;
        margin-top: 0;
        margin-bottom: .5rem;
        color: inherit;
    }

    .text1 {
        text-align: left;
        font-size: var(--base-font-size);
        max-width: 100%;
        -ms-flex: 1;
        flex: 1;
    }
    
    .text2 {
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: column;
        border: none;
    }
    
    .text2 h3 {
        margin-left: 2px;
        margin-bottom: 4px;
        text-align: left;
    }
    
    .text2 ul {
        list-style: none;
        padding: 0;
        margin: 0;
        background: var(--lighter-bg);
        width: var(--ul-width);
        font-size: var(--ul-font-size);
        box-sizing: border-box;
        text-align: right;
    }
    
    .text2 li {
        padding: 6px;
        text-align: center;
        border-top: 1px solid var(--border1);
        border-right: 1px solid var(--border1);
        border-bottom: 1px solid var(--border1);
        border-left: 1px solid var(--border1);
    }

    .text2-red {
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: column;
        border: none;
        color: #fff;
        background: #e7040f;
        margin-top: .25rem;
        margin-bottom: .25rem;
        padding-right: .25rem;
        padding-left: .25rem;
        padding-bottom: 0rem;
    }

    .container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .container-centered {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    header.container {
        max-width: inherit;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 2rem;
    }

    .columns {
        display: -ms-flexbox;
        display: flex;
        margin-right: -.4rem;
        margin-left: -.4rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .columns-logo {
        display: flex;
        margin-top: .25rem;
        margin-bottom: .5rem;
        margin-right: -.4rem;
        margin-left: -.4rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .columns-nav {
        display: -ms-flexbox;
        display: flex;
        margin-right: -.4rem;
        margin-left: -.4rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        /* margin: .4rem 0 .4rem 1.6rem; */
        /* padding: 0; */
    }

    .column {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: 1;
        flex: 1;
        margin-bottom: 1rem;
    }

    .column-col3 {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        margin-bottom: 1rem;
        width: 25%;
    }

    .column-col6 {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        margin-bottom: 1rem;
        width: 50%;
    }

    .column-col8 {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        margin-bottom: 1rem;
        width: 66.66666667%;
    }

    .column-col12 {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        margin-bottom: 1rem;
        width: 100%;
    }

    .column-logo {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        width: 100%;
        margin-top: .25rem;
        display: -ms-flexbox;
        display: flex;
    }

    .column-nav {
        max-width: 100%;
        padding-right: .4rem;
        padding-left: .4rem;
        -ms-flex: none;
        flex: none;
        width: 16.6666667%;
        margin-bottom: .25rem;
    }

    .nav {
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        margin: .2rem 0 .4rem;
        list-style: none;
        -ms-flex-direction: column; /* might need to go */
    }
    
    .nav-active-icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid #000;
        border-radius: 6px;
        background: #fe5555;
        margin-right: 6px;
        /* animation: blink 0.2s ease 0s both infinite; blink animation does not fit here, reuse elsewhere*/
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .column-scroll { /* edit shit, what about columns ? */
        max-width: 100%;
        /* padding-right: .4rem;
        padding-left: .4rem; dont think these are needed*/
        -ms-flex: none;
        flex: none;
        width: 100%;
        /* margin-top: .25rem; only necessary when not on top*/
        display: -ms-flexbox;
        display: flex;
        overflow: clip; /* hidden, maybe */
        
    }

    .text-scroll {
        animation: marquee-1 10s linear infinite;
        white-space: nowrap;
        align-items: center;
        line-height: 1.5rem;
        padding-top: .15rem;
        padding-bottom: .25rem;
        color: #fff;
        background: #e7040f; /* maybe not red */
    }

    @keyframes marquee-1 {
        to {
            transform: translateX(-50%) /*-50% */
        }
    }

    /* BUTTONS */

    button, input {
        overflow: visible;
    }
    
    .btn-classic {
        font-family: var(--btn-classic-font);
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.25rem;
        position: relative;
        top: -0.15rem;
        display: inline-block;
        height: 1.5rem;
        padding: .0rem .5rem .1rem;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none;
        color: var(--border0);
        border: .1rem solid var(--border0);
        border-radius: 0;
        outline: 0;
        background: var(--main-bg);
        box-shadow: 2px 2px var(--shadow1);
        -webkit-appearance: none;
        appearance: none;
        fill: var(--border0);
    }

    .btn-classic:focus,
    .btn-classic:hover {
        text-decoration: none;
        color: var(--main-bg);
        border-color: var(--border0);
        background: var(--border0);
        box-shadow: 2px 2px var(--shadow1);
        fill: var(--main-bg);
    }

    .btn-classic:active {
        text-decoration: none;
        color: var(--border0);
        background: #ffb700;
        box-shadow: 0px 0px 0px 0px;
        top: 0rem;
        left: .1rem; /* check if this feels right */
    }

    .btn-ctrl {
        font-family: var(--btn-classic-font);
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        text-transform: uppercase;
        line-height: 1rem;
        position: relative;
        top: -0.125rem;
        display: inline-block;
        height: 1.5rem;
        padding: .0rem .5rem .12rem .5rem; /*change line-height, when padding dont work*/
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none;
        letter-spacing: .1rem;
        color: var(--border0);
        border: .1rem solid var(--border0);
        border-radius: 0;
        outline: 0;
        background: var(--main-bg);
        box-shadow: 2px 2px var(--shadow1);
        -webkit-appearance: none;
        appearance: none;
        fill: var(--border0);
        width: 7rem;
        max-width: 7rem;
    }

    .btn-nav {
        font-family: var(--btn-nav-font);
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        line-height: 1rem;
        position: relative;
        top: -.125rem;
        display: inline-block;
        height: 1.5rem;
        width: 100%;
        margin-right: .5rem;
        padding: .1rem 0 .05rem 0; /* .25 0 .05 0 */
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none;
        color: var(--border0);
        border: .1rem solid var(--border0);
        border-radius: 0;
        outline: 0;
        background: var(--main-bg);
        box-shadow: 2px 2px var(--shadow1);
        -webkit-appearance: none;
        appearance: none;
        fill: var(--border0);
    }

    .btn-nav:focus,
    .btn-nav:hover,
    .btn-ctrl:focus,
    .btn-ctrl:hover {
        text-decoration: none;
        color: var(--main-bg);
        border-color: var(--border0);
        background: var(--border0);
        box-shadow: 2px 2px var(--shadow1);
        fill: var(--main-bg)
    }

    .btn-nav:active {
        text-decoration: none;
        color: var(--border0);
        background: var(--main-bg);
        box-shadow: 0px 0px 0px 0px;
        top: 0rem;
        left: .1rem; /* check if this feels right */
    }

    .btn-ctrl:active {
        text-decoration: none;
        color: var(--border0);
        background: #00794c;
        box-shadow: 0px 0px 0px 0px;
        top: 0rem;
        left: .1rem; /* check if this feels right */
    }

    .btn-test {
        font-family: var(--btn-classic-font);
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.5rem;
        position: relative;
        /* top: -2px; */
        display: inline-block;
        /* height: 1.75rem; - wrong value, keep empty to seemingly center*/ 
        padding: 0 .5rem 0;
        cursor: pointer;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-decoration: none;
        color: var(--border0);
        border: 3px solid var(--border0); /*was 1rem*/
        border-radius: 0;
        outline: 0;
        background: var(--main-bg);
        box-shadow: 1px 1px 0px 0px var(--border0), 2px 2px 0px 0px var(--border0), 3px 3px 0px 0px var(--border0), 4px 4px 0px 0px var(--border0), 5px 5px 0px 0px var(--border0); /* variable behind every line to change color*/
        -webkit-appearance: none;
        appearance: none;
        fill: var(--border0);
        /* touch-action: manipulation; testing */
    }

    /* work on this bruh bruh*/

    /*.btn-test:focus*/
    .btn-test:hover {
        text-decoration: none;
        color: var(--main-bg);
        border-color: var(--border0);
        background: var(--border0);
        box-shadow: 1px 1px 0px 0px var(--border0), 2px 2px 0px 0px var(--border0), 3px 3px 0px 0px var(--border0), 4px 4px 0px 0px var(--border0), 5px 5px 0px 0px var(--border0); /* idk how else to overwrite the text-color / shadow-color connection*/
    }

    .btn-test:active {
        text-decoration: none;
        color: var(--border0);
        background: var(--main-bg);
        box-shadow: 0px 0px 0px 0px;
        top: 5px;
        left: 5px;
    }
    
    /* TABLES */

    .table {
        font-size: var(--table-font-size1);
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        text-align: left;
        border-right: 1px solid var(--border2);
        border-top: 2px dotted var(--shadow3);
        box-shadow: 2px 2px var(--shadow3);
    }

    .table-silver {
        font-size: var(--table-font-size1);
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        text-align: left;
        border-left: 4px solid var(--shadow0);
        border-right: 1px solid var(--border2);
        border-top: 2px dotted var(--border2);
        border-bottom: 1px solid var(--border2);
        box-shadow: 2px 2px var(--shadow3)
    }

    .table-dark-green {
        border-left: 4px solid #00794c
    }

    .table tbody th {
        border: .1rem solid var(--border2)
    }

    .table th {
        font-weight: 700;
        line-height: 1.2rem;
        height: 1.85rem;
        padding: .2rem .4rem 0;
        border-right: .1rem solid var(--border2);
        border-bottom: .1rem solid var(#000);
    }

    .table td {
        line-height: 1.4rem;
        overflow: hidden;
        height: 1.85rem;
        padding: 0 .4rem 0;
        text-overflow: ellipsis;
        border: .1rem solid var(--border2)
    }

    .table-form td {
        line-height: 1.4rem;
        overflow: hidden;
        height: 1.85rem;
        padding-top: .5rem;
        padding-bottom: .25rem;
        text-overflow: ellipsis;
        border: .1rem solid var(--border2);
    }

    .form-horizontal {
        padding: .4rem 0;
    }

    .form-horizontal .form-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flexbox: wrap;
        flex-wrap: wrap;
        margin-bottom: .4rem;
    }

    .form-input {
        font: var(--body-font);
        font-size: var(--base-font-size);
        position: relative;
        top: -0.15px; /*check if this really is necessary, also buttons */
        display: block;
        width: 100%;
        max-width: 100%;
        height: 1.5rem;
        padding: 0rem 0rem 0rem .3rem; 
        color: var(--border0);
        border: .1rem solid var(--border0);
        outline: 0;
        background: var(--main-bg);
        background-image: none;
        box-shadow: inset 2px 2px var(--shadow3);
        -webkit-appearance: none;
        appearance: none;
    }

    /* IMAGES */

    .img {
        border-style: none;
    }

    .img-card {
        display: block;
        max-width: 100%;
        height: auto;
        margin-right: 2px;
        margin-bottom: 2px;
        border: 1px solid var(--shadow0);
        flex: 1 1 auto;
        box-shadow: 2px 2px var(--shadow3)
    }

    .img-card2 {
        display: block;
        max-width: 100%;
        height: auto;
        margin-right: 2px;
        margin-bottom: 2px;
        border: 1px dotted var(--border0);
        flex: 1 1 auto;
    }

    .img-card3 {
        display: block;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-top: .25rem;
        border: 1px solid var(--border0);
        border-width: 1px;
        border-style: solid;
    }

    /* COLOR DEFINITIONS & OTHER THINGS */

    p {
        line-height: 1.5rem;
        margin: 0 0 1.2rem;
    }

    ol,ul {
        margin: .4rem 0 .4rem 1.6rem;
        padding:0;
    }

    ul {
        list-style: disc outside;
    }

    ul ul {
        list-style-type: circle
    }

    ol {
        list-style: decimal outside;
    }

    ol ol {
        list-style-type: lower-alpha;
    }

    .p-centered {
        display: block;
        float: none;
        margin-right: auto;
        margin-left: auto;
    }

    *,::after,::before {
        box-sizing: inherit;
    }

    img {
        border-style: none;
    }

    blockquote {
        margin-right: 0;
        margin-left: 0;
        padding: .4rem .8rem;
        border-left: .1rem solid var(--border0)
    }

    .small {
        font-size: 80%;
        font-weight: 400;
    }

    .moon-gray {
        color: var(--shadow2);
        fill: var(--shadow2);
    }

    .bg-gold {
        background: #ffb700
    }

    .bg-dark-green {
        background: #00794c;
    }

    .bg-dark-red {
        background: #e7040f;
    }

    .white {
        color: white;
        fill: white;
    }

    .black {
        color: #000;
        fill: #000;
    }
    
    a {
        cursor: pointer;
        text-decoration: none;
        color: #002dce;
        outline: 0
        
    }
    
    a:focus {
        box-shadow: 0 0 0 .1rem var(--trans);
    }
    
    a.active,a:active,a:focus,a:hover {
        text-decoration: none;
        color: #000000;
    }
    
    .bg-main {
        background-color: var(--main-bg);
    }
    
    .bg-muted {
        background-color: var(--lighter-bg);
    }
    
    .text-accent {
        color: var(--border1);
    }
    
    .text-primary {
        color: var(--text-color);
    }

    .mw9 {
        width: 9rem;
        max-width: 9rem;
    }

    .ba-solid1 {
        border-width: 1px;
        border-style: solid;
        padding: .5rem;
    }

    .ba-solid2 {
        border-width: 1px;
        border-style: solid;
        padding-top: 0rem;
        padding-right: .25rem;
        padding-bottom: .25rem;
        padding-left: .25rem;
    }

    .ba-dotted {
        border-width: 1px;
        border-style: dotted;
        padding: .5rem;
    }

    /* FONTS */

    @font-face {
        font-family: NewsCycle-Regular;
        src: url('assets/fonts/NewsCycle-Regular.ttf') format('truetype');
    }

    @font-face {
        font-family: NewsCycle-Bold;
        src: url('assets/fonts/NewsCycle-Bold.ttf') format('truetype');
    }

    /* MEDIA */

    @media (max-width: 720px) {
         .col-md-6,.col-md-12,.col-md-nav,.col-md-logo {
            -ms-flex: none;
            flex: none;
        }

        .col-md-12 {
            width: 100%;
        }

        .col-md-6 {
            width: 50%;
        }

        .col-md-nav {
            width: 33.33333333%;
        }

        .col-md-logo {
            width: 100%;
        }

    }

    @media (max-width: 436px) {
        .col-sm-6,.col-sm-12,.col-sm-nav,.col-sm-logo {
            -ms-flex: none;
            flex: none;
        }

        .col-sm-12 {
            width: 100%;
        }

        .col-sm-6 {
            width: 50%;
        }

        .col-sm-nav {
            width: 33.33333333%;
        }

        .col-sm-logo {
            width: 100%;
        }

    }

    @media print {
        header {
            display: none;
        }

        footer {
            display: none;
        }

        .btn {
            display: none;
        }
    }