.tabbed {
    position: relative;
}

.tabbed figure {
    display: block;
    margin: 0;
    clear: both;
    z-index: 9;
}

    .tabbed figure .tab_form {
        opacity: 0;
        visibility: hidden;
        height: 0;
        width: 100%;
        line-height: 1.5em;
        letter-spacing: 0.3px;
        text-align: left;
        margin: 0;
    }

        .tabbed figure .tab_form .tab_inner > *:first-child {
            margin-top: 0;
        }

        .tabbed figure .tab_form .tab_inner > *:last-child {
            margin-bottom: 0;
        }

.tabbed > input {
    display: none;
}

.tabbed nav {
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

    .tabbed nav label {
        width: 25%;
        padding: 8px 20px;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.5s;
    }

.theme-1.tabbed {
    display: flex;
    flex-wrap: wrap;
}

    .theme-1.tabbed figure {
        width: 75%;
        margin-top: 10px;
    }

        .theme-1.tabbed figure .tab_form {
            height: 0;
            background: #fff;
            text-align: left;
        }

            .theme-1.tabbed figure .tab_form .tab_inner {
                padding: 20px;
                /*border: 1px solid #002147;*/
            }

    .theme-1.tabbed nav {
        width: 25%;
        height: auto;
        display: block;
    }

        .theme-1.tabbed nav label {
            display: block;
            width: 100%;
            padding: 8px 20px;
            border: 1px solid #002147;
            background: #002147;
            color: #fff;
            cursor: pointer;
            margin-bottom: 4px;
            margin-right: 4px;
            transition: background-color 0.5s;
        }

            .theme-1.tabbed nav label:hover {
                background: rgba(0, 150, 255, 0.5);
            }

            .theme-1.tabbed nav label:active {
                background: #ffffff;
            }

.theme-2.tabbed figure {
    padding-top: 35px;
}

    .theme-2.tabbed figure .tab_form .tab_inner {
        padding: 15px;
        border: 1px solid #002147;
        background-color: #ffffff;
    }

.theme-2.tabbed nav {
    position: absolute;
    width: 100%;
}

    .theme-2.tabbed nav label {
        border: 1px solid #002147;
        background: #002147;
        width: 10%;
        margin-right: 4px;
    }

        .theme-2.tabbed nav label:hover {
            background: rgba(0, 150, 255, 0.5);
        }

        .theme-2.tabbed nav label:active {
            background: #ffffff;
        }

.theme-3.tabbed {
    display: flex;
    flex-wrap: wrap;
}

    .theme-3.tabbed figure {
        width: 75%;
    }

        .theme-3.tabbed figure .tab_form {
            height: 0;
            background: #fff;
            text-align: left;
        }

            .theme-3.tabbed figure .tab_form .tab_inner {
                padding: 20px;
                border: 1px solid #002147;
            }

    .theme-3.tabbed nav {
        width: 25%;
        height: auto;
        display: block;
    }

        .theme-3.tabbed nav label {
            display: block;
            width: 80%;
            padding: 8px 20px;
            color: #002147;
            cursor: pointer;
            margin-bottom: 4px;
            margin-right: 4px;
            padding-left: 30px;
            text-align: left;
            position: relative;
        }

            .theme-3.tabbed nav label:before {
                content: "➤";
                position: absolute;
                left: -20px;
                top: 2px;
                opacity: 0;
                font-size: 24px;
                transition: opacity 0.5s, left 0.5s;
            }

            .theme-3.tabbed nav label:hover:before {
                opacity: 1;
                left: -8px;
            }

            .theme-3.tabbed nav label:active:before {
                opacity: 1;
                left: -8px;
            }

@media (max-width: 767px) {
    .theme-1.tabbed nav {
        width: 100%;
    }

        .theme-1.tabbed nav label {
            width: calc( 100% - 40px );
            display: block;
            float: none;
            margin: 4px 0;
            border-bottom: 1px solid #002147 !important;
        }

            .theme-1.tabbed nav label:after {
                display: none !important;
            }

    .theme-1.tabbed figure {
        width: 100%;
    }

    .theme-3.tabbed nav {
        width: 100%;
    }

    .theme-3.tabbed figure {
        width: 100%;
        margin-top: 20px;
    }
}

.tabbed #tab1_1:checked ~ figure .tab1 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab1_2:checked ~ figure .tab1 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab1_3:checked ~ figure .tab1 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.theme-1 #tab1_1:checked ~ nav label[for=tab1_1] {
    background: #ffffff;
    color: #002147;
}

.theme-2 #tab1_2:checked ~ nav label[for=tab1_2] {
    background: #ffffff;
    border-bottom-color: #ffffff;
    color: #002147;
}

.theme-3 #tab1_3:checked ~ nav label[for=tab1_3]:before {
    opacity: 1;
    left: 0px;
}

.tabbed #tab2_1:checked ~ figure .tab2 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab2_2:checked ~ figure .tab2 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab2_3:checked ~ figure .tab2 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.theme-1 #tab2_1:checked ~ nav label[for=tab2_1] {
    background: #ffffff;
    color: #002147;
}

.theme-2 #tab2_2:checked ~ nav label[for=tab2_2] {
    background: #ffffff;
    border-bottom-color: #ffffff;
    color: #002147;
}

.theme-3 #tab2_3:checked ~ nav label[for=tab2_3]:before {
    opacity: 1;
    left: 0px;
}

.tabbed #tab3_1:checked ~ figure .tab3 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab3_2:checked ~ figure .tab3 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.tabbed #tab3_3:checked ~ figure .tab3 {
    opacity: 1;
    visibility: visible;
    height: auto;
}

.theme-1 #tab3_1:checked ~ nav label[for=tab3_1] {
    background: #ffffff;
    color: #002147;
}

.theme-2 #tab3_2:checked ~ nav label[for=tab3_2] {
    background: #ffffff;
    border-bottom-color: #ffffff;
    color: #002147;
}

.theme-3 #tab3_3:checked ~ nav label[for=tab3_3]:before {
    opacity: 1;
    left: 0px;
}

/* Tabs - End */
/* Some CSS to prettyfy the screen */
body {
    text-align: center;
    font-family: Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #ff9221 0%, #b211ff 100%);
    background-repeat: no-repeat;
}

    body:after {
        content: " ";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0.8;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.4" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    body a {
        color: #0078cc;
        text-decoration: none;
    }

    body #main-wrapper {
        padding: 40px 0;
    }

    body .contrast-bg {
        padding: 15px;
        background-color: rgba(255, 255, 255, 0.6);
    }

        body .contrast-bg:first-child {
            margin-bottom: 60px;
        }

        body .contrast-bg:last-child {
            margin-top: 60px;
        }

        body .contrast-bg p {
            margin-top: 0;
        }

    body .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: block;
    }

        body .container .left {
            text-align: left;
            width: 25%;
            margin: 0 15px;
        }

        body .container .right {
            text-align: left;
            width: 75%;
            margin: 0 15px;
        }

@media (max-width: 767px) {
    body .container {
        display: block;
    }

        body .container .left,
        body .container .right {
            margin: 15px;
            width: calc( 100% - 60px );
        }
}