body {
    float: left; width: 100%; background: #000;
}

.main-color {
    color: #4cfc0f
}

.td-footer {
    background-color: #242424 !important;
}

h1 {
    font-size: 56px; color: #fff; text-align: left; font-weight: 700; max-width: 700px; margin-top: 0;
}

h2 {
    font-size: 21px; color: white; font-weight: 700;
}

p, .td-footer a, span{
    color: #fff; font-weight: 300; font-size: 16px;
}

a.logo {
    width: 50px; margin-right: 70px;
}

a.logo img {
    float: left; width: 100%;
}

.navbar .container {
    max-width: 1024px;
}

.navbar {
    height: 150px;
}

.navbar-light a.nav-link {
    color: #fff !important; font-size: 14px; padding-right: 15px !important;
}

.navbar-light .nav-item.active a.nav-link {
    color: #4cfc0f !important;
}

.flags img {
    width: 22px; margin-left: 7px; opacity: 0.5;
}

.flags img.activeFlag{
    opacity: 1;
}

.btn {
    border-radius: 7px; padding: 7px 35px;
}



.fade-in-early {
    opacity: 0;
    animation: fadeInAnimationEarly ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-later {
    opacity: 0;
    animation: fadeInAnimationLater ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


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


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

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

@media (max-width: 1023px) {
    .navbar {
        height: auto;
        min-height: 100px; margin-bottom: 25px;
    }

    .navbar-toggler {
        filter: invert(100);
    }

    a.logo {
        width: 50px; margin-left: 15px;
    }

    .collapse, .collapsing {
        display: none !important;
        position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #444; z-index: 1000;
    }

    .collapse.show {
        flex-wrap: wrap;
        display: flex !important;
        align-items: flex-start;
        flex-direction: column;
    }

    ul.navbar-nav {
        align-self: flex-start;
    }

    .navbar-light ul.navbar-nav {
        width: 100%; padding-top: 25px;
    }

    .navbar-light a.nav-link {
        color: #fff !important; font-size: 22px;
    }

    .navbar-light .nav-item.active a.nav-link {
        color: #4cfc0f !important;
    }

    .flags {
        margin-left: 25px;
        margin-top: 55px;
        align-self: flex-end;
        width: 100%;
    }

    .flags img {
        width: 30px;
    }

    .navbar-collapse {
        height: 100vh;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 40px;
    }
}

/*------------------------------------
- COLOR primary
------------------------------------*/
.alert-primary {
    color: #268e01;
    background-color: #e2fed8;
    border-color: #d3fec4;
}

.alert-primary hr {
    border-top-color: #c0fdab;
}

.alert-primary .alert-link {
    color: #185c01;
}

.badge-primary {
    color: #212529;
    background-color: #4cfc0f;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
    color: #212529;
    background-color: #38d502;
}

.bg-primary {
    background-color: #4cfc0f !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: #38d502 !important;
}

.border-primary {
    border-color: #4cfc0f !important;
}

.btn-primary {
    color: #212529;
    background-color: #4cfc0f;
    border-color: #4cfc0f;
}

.btn-primary:hover {
    color: #212529;
    background-color: #3ce402;
    border-color: #38d502;
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(76, 252, 15, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #212529;
    background-color: #4cfc0f;
    border-color: #4cfc0f;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #38d502;
    border-color: #34c602;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(76, 252, 15, 0.5);
}

.btn-outline-primary {
    color: #4cfc0f;
    background-color: transparent;
    border-color: #4cfc0f;
}

.btn-outline-primary:hover {
    color: #212529;
    background-color: #4cfc0f;
    border-color: #4cfc0f;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(76, 252, 15, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #4cfc0f;
    background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #4cfc0f;
    border-color: #4cfc0f;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(76, 252, 15, 0.5);
}

.list-group-item-primary {
    color: #268e01;
    background-color: #d3fec4;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
    color: #268e01;
    background-color: #c0fdab;
}

.list-group-item-primary.list-group-item-action.active {
    color: #212529;
    background-color: #268e01;
    border-color: #268e01;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #d3fec4;
}

.table-hover .table-primary:hover {
    background-color: #c0fdab;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: #c0fdab;
}

.text-primary {
    color: #4cfc0f !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: #38d502 !important;
}