html {
    font-size: 14px;
}

@media screen and (min-width: 992px) {
    html {
        font-size: 16px;
    }

    .navbar .container-fluid, .navbar-expand-lg .navbar-collapse, .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar {
        width: 13em;
        height: 100vh;
        align-items: flex-start;
    }

    .navbar-brand {
        margin-left: 0.5em;
        margin-bottom: 3em;
    }

    .navbar-footer {
        position: absolute;
        bottom: 0;
        width: 13em;
        font-size: 0.9em;
        margin-bottom: 1em;
    }

        .navbar-footer.hr {
            margin-left: 1em;
            margin-right: 1em;
        }

    .main {
        margin-left: 13em;
    }
}

@media screen and (max-width: 992px) {
    .main {
        margin-top: 5em;
    }
}

.navbar .navbar-nav .nav-link {
    color: #282f72;
    font-size: 1.1em;
}

.navbar-brand {
    font-size: 1.5em;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f5f6f9;
    /*    background: radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, 
                radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, 
                linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, 
                linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, 
                linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, 
                linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
    background-size: 40px 60px;*/
}

.nav-pills .nav-link.android.active, .nav-pills .show > .nav-link {
    color: #000000;
    background-color: #a4c639;
}

.nav-pills .nav-link.windows.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #0084ff;
}

a {
    text-decoration: none;
}

.video-list-thumbs {
}

    .video-list-thumbs > li {
        margin-bottom: 12px;
    }

.embed-responsive-item {
    background-color: black;
}

/* GREEN HEXAGON */
.hexagon-green {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: rgb(164, 198, 57); /* #a4c639; */
    text-align: center;
}

    .hexagon-green, .hexagon-green::before, .hexagon-green::after {
        /* easy way: height is width * 1.732
          actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
          remove border-radius for sharp corners on hexagons */
        width: 67px;
        height: 116px;
        border-radius: 20%/5%;
    }


        .hexagon-green::before {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }

        .hexagon-green::after {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }

        .hexagon-green:nth-child(even) {
            /* top approx. 50% of .hexagon height + spacing */
            top: 59px;
        }

        .hexagon-green:hover {
            background-color: hsl(74, 69%, 41%);
            cursor: pointer;
            z-index: 105;
        }

        .hexagon-green:active {
            background-color: hsl(74, 70%, 34%);
            z-index: 110;
        }

/* RED HEXAGON */
.hexagon-red {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: hsl(6, 78%, 57%);
    text-align: center;
}

    .hexagon-red, .hexagon-red::before, .hexagon-red::after {
        /* easy way: height is width * 1.732
          actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
          remove border-radius for sharp corners on hexagons */
        width: 67px;
        height: 116px;
        border-radius: 20%/5%;
    }


        .hexagon-red::before {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }

        .hexagon-red::after {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }

        .hexagon-red:nth-child(even) {
            /* top approx. 50% of .hexagon height + spacing */
            top: 59px;
        }

        .hexagon-red:hover {
            background-color: hsl(0, 79%, 64%);
            cursor: pointer;
            z-index: 105;
        }

        .hexagon-red:active {
            background-color: hsl(0, 50%, 47%);
            z-index: 110;
        }


/* AMBER HEXAGON */
.hexagon-amber {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: hsl(37, 90%, 51%);
    text-align: center;
}

    .hexagon-amber, .hexagon-amber::before, .hexagon-amber::after {
        /* easy way: height is width * 1.732
          actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
          remove border-radius for sharp corners on hexagons */
        width: 67px;
        height: 116px;
        border-radius: 20%/5%;
    }


        .hexagon-amber::before {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }

        .hexagon-amber::after {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }

        .hexagon-amber:nth-child(even) {
            /* top approx. 50% of .hexagon height + spacing */
            top: 59px;
        }

        .hexagon-amber:hover {
            background-color: hsl(25, 71%, 55%);
            cursor: pointer;
            z-index: 105;
        }

        .hexagon-amber:active {
            background-color: hsl(31, 51%, 50%);
            z-index: 110;
        }

/* GRAY HEXAGON */
.hexagon-gray {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: hsl(184, 9%, 85%);
    text-align: center;
}

    .hexagon-gray, .hexagon-gray::before, .hexagon-gray::after {
        /* easy way: height is width * 1.732
          actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
          remove border-radius for sharp corners on hexagons */
        width: 67px;
        height: 116px;
        border-radius: 20%/5%;
    }


        .hexagon-gray::before {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }

        .hexagon-gray::after {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }

        .hexagon-gray:nth-child(even) {
            /* top approx. 50% of .hexagon height + spacing */
            top: 59px;
        }

        .hexagon-gray:hover {
            background-color: hsl(184, 9%, 69%);
            cursor: pointer;
            z-index: 105;
        }

        .hexagon-gray:active {
            background-color: hsl(210, 15%, 43%);
            z-index: 110;
        }

/* HEXAGON */
.hexagon {
    position: relative;
    display: inline-block;
    /* left/right margin approx. 25% of .hexagon width + spacing */
    margin: 1px 18px;
    background-color: hsl(60, 61%, 66%);
    text-align: center;
}

    .hexagon, .hexagon::before, .hexagon::after {
        /* easy way: height is width * 1.732
          actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
          remove border-radius for sharp corners on hexagons */
        width: 67px;
        height: 116px;
        border-radius: 20%/5%;
    }

        .hexagon::before {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(-60deg);
        }

        .hexagon::after {
            background-color: inherit;
            content: "";
            position: absolute;
            left: 0;
            transform: rotate(60deg);
        }

        .hexagon:nth-child(even) {
            /* top approx. 50% of .hexagon height + spacing */
            top: 59px;
        }

        .hexagon:hover {
            background-color: hsla(60, 75%, 75%, 1.0);
            cursor: pointer;
            z-index: 105;
        }

        .hexagon:active {
            background-color: hsla(60, 75%, 50%, 1.0);
            z-index: 110;
        }

.hexanone {
    position: relative;
    display: inline-block;
    width: 67px;
    height: 116px;
    margin: 1px 18px;
}

    .hexanone:nth-child(even) {
        top: 59px;
    }

.hexagontent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    font-size: 1.3rem;
    line-height: 1.2;
    z-index: 100;
}

.ibws-fix {
    /* inline-block whitespace fix */
    font-size: 0;
}

.honeycomb {
    margin: 0 auto;
    text-align: center;
}

a[target="_blank"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
}

.img-max {
    max-width: 120px;
    width: 100%;
}

.border-bottom-green {
    border-bottom: 4px solid rgba(164, 198, 57, 0.8);
}
.border-bottom-amber {
    border-bottom: 4px solid rgba(243, 156, 18, 0.8);
}
.border-bottom-red {
    border-bottom: 4px solid rgba(231, 76, 60, 0.8);
}
.border-bottom-gray {
    border-bottom: 4px solid rgba(213, 220, 220, 0.8);
}