@charset "UTF-8";

@font-face {
    font-family: 'DINProPl';
    src: url('../fonts/DINProPl-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/DINProPl-Medium.otf')  format('opentype'),
    url('../fonts/DINProPl-Medium.woff') format('woff'), url('../fonts/DINProPl-Medium.ttf')  format('truetype'), url('../fonts/DINProPl-Medium.svg#DINProPl-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'DINProPl';
    src: url('../fonts/DINProPl-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/DINProPl-Bold.otf')  format('opentype'),
    url('../fonts/DINProPl-Bold.woff') format('woff'), url('../fonts/DINProPl-Bold.ttf')  format('truetype'), url('../fonts/DINProPl-Bold.svg#DINProPl-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

html {
    font-size: 16px;
}

body {
    display: block;
    max-width: 1920px;
    margin: 0px auto;
    font-family: 'Lato', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    font-weight: 400;
    font-size: 16px;
    color: #222222;
    overflow-x: hidden;
}

.container-fluid {
    display: block;
    max-width: 1400px;
    margin: 0px auto;
    padding: 0px 50px;
}

.bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1, .h1, h2, h3, h4, h5 {
    font-weight: 700;
    font-family: 'DINProPl', sans-serif;
    display: inline-block;
}

h1, .h1 {
    color: #1672ac;
    font-size: 2.5rem;
}

h4 {
    color: #1672ac;
    font-size: 1.125rem;
    margin: 0px 0px 10px 0px;
}

.btn-default {
    background: transparent !important;
    border: solid 3px #fff !important;
    padding: 10px 40px 12px;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 700;
}

.btn {
    border-radius: 0px;
}

.btn-info {
    padding: 10px 40px 12px;
    text-align: center;
    background: transparent !important;
    border: solid 3px transparent !important;
    letter-spacing: 1px;
    color: #222;
    font-weight: 700;
}

.btn-yellow {
    padding: 10px 40px 12px;
    text-align: center;
    background: #f6d000 !important;
    border: solid 3px #f6d000 !important;
    letter-spacing: 1px;
    color: #222;
    font-weight: 700;
}

.btn-primary {
    padding: 10px 40px 12px;
    text-align: center;
    background: #1672ac !important;
    border: solid 3px #1672ac !important;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 700;
}

.btn-primary:hover, .btn-primary:focus {
    background: #ffffff !important;
    border: solid 3px #1672ac !important;
    color: #1672ac !important;
}
.btn-link {
    padding: 10px 40px 12px;
}


.btn-default img, .btn-info img {
    display: inline-block;
    margin-left: 15px;
}

.btn:hover {
    opacity: 0.666;
    color: #222;
}

.display-table {
    width: 100%;
}

p {
    margin-bottom: 30px;
}

/* ===== WCAG  ===== */

*{
    outline: none;
}
a:active{
    outline:1px dashed #ccc;
}
.skip-link{
    position:absolute;
    left: -9999px;
    border:1px dotted black;
    padding:5px;
    font-size:18px;
    background:rgba(233,79,27,0.31);
    z-index:100;
}
.skip-link:focus{
    position:absolute;
    left:0
}
a:focus,input:focus{
    outline:1px dashed red !important
}

/* ===== HEADER ===== */

header {
    top: -10px;
}

header, .header {
    height: 90px;
    display: block;
    background: none;
    position: absolute;
    padding: 35px 50px;
    z-index: 100;
    transition: 0.3s all;
}

    header .logo, .header .logo {
        display: inline-block;
        position: absolute;
        left: 50px;
    }

    header .menu-icon, .header .menu-icon {
        display: inline-block;
        position: absolute;
        left: 175px;
        top: 46px;
        cursor: pointer;
    }

        header .menu-icon div, .header .menu-icon div {
            display: inline-block;
        }

        header .menu-icon div.text, .header .menu-icon div.text {
            font-size: 15px;
            color: #fff;
            margin-left: 15px;
            font-weight: 700;
            vertical-align: 12px;
        }

            header .menu-icon div span, .header .menu-icon div span {
                display: block;
                width: 25px;
                height: 3px;
                margin: 6px 0px;
                background: #fff;
            }

    header .account, .header .account {
        position: absolute;
        right: 350px;
        top: 46px;
        font-size: 15px;
    }

    .header .application-btn {
        position: absolute;
        right: 500px;
        top: 30px;
        font-size: 15px;
    }

        .header .application-btn * {
            display: inline-block;
            vertical-align: middle;
            color: #222;
            font-weight: 700;
            margin: 0px 3px;
        }

        header .account *, .header .account * {
            display: inline-block;
            vertical-align: middle;
            color: #fff;
            font-weight: 700;
            margin: 0px 3px;
        }

    header .btn-default, .header .btn-default {
        color: #fff !important;
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        position: absolute;
        right: 170px;
        top: 36px;
    }

    header .color-change-icon, .header .color-change-icon {
        position: absolute;
        right: 90px;
        top: 44px;
        cursor: pointer;
        font-size: 15px;
    }

    header .font-change, .header .font-change {
        position: absolute;
        right: 35px;
        color: #fff;
        font-weight: 700;
        font-size: 26px;
        top: 37px;
        cursor: pointer;
    }

        header .font-change span, .header .font-change span {
            font-size: 14px;
        }

.header {
    background: #fff;
    top: -90px;
    position: fixed;
    width: 100%;
    left: 0px;
    padding: 14px 50px;
}

.header.active {
    top: 0px;
}

    .header .menu-icon {
        top: 29px;
    }

            .header .menu-icon div span {
                background: #1672ac;
            }

    .header .account {
        top: 29px;
    }

    .header .btn-default {
        top: 19px;
        border-color: #1672ac !important;
        color: #222 !important;
    }

    .header .color-change-icon {
        top: 27px;
    }

    .header .font-change {
        top: 20px;
        color: #222;
    }

            .header .menu-icon div.text {
                color: #222;
            }

        .header .account * {
            color: #222;
        }

/* ===== MENU ===== */

.menu {
    width: 50vw;
    height: 100vh;
    position: fixed;
    background: #fff;
    display: block;
    top: 0px;
    left: -50vw;
    transition: 0.5s all;
    z-index: 100;
    padding: 0px 10%;
}

.menu.active {
    left: 0px;
}

    .menu ul {
        padding: 0px;
    }

        .menu ul li {
            list-style: none;
            margin: 10px 0px;

        }

            .menu ul li a {
                font-size: 32px;
                color: #1672ac;
                font-family: DINProPl, sans-serif;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 1px;
                text-decoration: none !important;
            }

            .menu ul li a:hover {
                color: #f6d000;
                opacity: 1;
            }

.close-menu {
    position: absolute;
    right: 50px;
    top: 40px;
    z-index: 2;
    color: #1672ac;
    font-family: DINProPl, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
}

/* ===== FOOTER ===== */

footer {
    background: #222222;
    color: #fff;
    position: relative;
    padding: 60px 0px 30px;
    font-size: 13px;
    font-family: Roboto, sans-serif;
    border: none;
    margin: 0px;
}

    footer a {
        color: #fff;
    }

    footer strong {
        font-weight: 500;
    }

/* ===== START ===== */

.start {
    position: relative;
}

    .start .image {
        width: 100vw;
        height: 100vh;
        display: block;
    }

    .start .text {
        position: absolute;
        left: 50%;
        top: 30%;
        color: #fff;
    }

        .start .text h2 {
            font-size: 4.688rem;
            color: #fff;
            margin: 0px 0px 30px 0px;
            text-transform: uppercase;
            line-height: 1.1em;
        }

            .start .text h2 span {
                color: #f6d000;
            }

        .start .text .small-text {
            font-size: 1.25rem;
            font-weight: 300;
            margin-bottom: 40px;
        }

        .start .text .btn {
            font-weight: 700;
            color: #fff;
        }

    .start .bottom-text {
        position: absolute;
        z-index: 10;
        right: 30px;
        bottom: 30px;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 1.4em;
    }

    .start .bottom-text span {
        color: #f6d000;
        font-size: 30px;
        font-weight: 700;
        font-family: 'DINProPl', sans-serif;
    }

    .start .bx-wrapper .bx-pager{
       bottom: 30px;
    }
    .start .bx-wrapper .bx-controls-auto{
        bottom: 70px;
        width: 100%;
        left: 0;
        text-align: center;
    }
    .start .bx-wrapper .bx-controls-auto .bx-start{
        background: #ffffff;
        width: 30px;
        height: 30px;
        margin: 0 7px;
    }
    .start .bx-wrapper .bx-controls-auto .bx-start.active {
        display: none;
    }
    .start .bx-wrapper .bx-controls-auto .bx-stop{
        background: #ffffff;
        width: 20px;
        height: 20px;
        margin: 0 7px;
    }
    .start .bx-wrapper .bx-controls-auto .bx-stop.active {
        display: none;
    }

    .start .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{
        text-align: center;
        width: 100%;
    }
    .start .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{
        text-align: center;
        width: 100%;
    }

    .start .bx-wrapper .bx-pager.bx-default-pager a{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        /*background: #ffffff;*/
        background: transparent;
        border: 2px solid #ffffff;
    }
    .start .bx-wrapper .bx-pager.bx-default-pager a:hover,
    .start .bx-wrapper .bx-pager.bx-default-pager a.active{
        /*background: #f6d000 !important;*/
        background: transparent;
        border: 2px solid #f6d000;
    }


    .start .bx-wrapper .bx-controls-auto a.bx-stop:hover,
    .start .bx-wrapper .bx-controls-auto a.bx-stop.active{
        background: #f6d000 !important;
    }

    .start .bx-wrapper .bx-controls-auto a.bx-start{
        border-width: 15px 0 15px 15px;
        border-style: solid;
        border-color: transparent;
        border-left-color: #ffffff;
        background: transparent;
        width: 0;
        height: 0;
        position: relative;
        top: 6px;
    }
    .start .bx-wrapper .bx-controls-auto a.bx-start:hover,
    .start .bx-wrapper .bx-controls-auto a.bx-start.active{
        border-left-color: #f6d000 !important;
    }

/* ===== DESCRIPTION ===== */

.description {

}

    .description .box {
        display: block;
        height: 950px;
        padding: 0px 15%;
    }

.text-blue {
    font-weight: 300;
    color: #1672ac;
    font-size: 1.875rem;
    line-height: 1.2em;
}

    .description .image {
        display: block;
        height: 950px;
        text-align: center;
        padding: 0px 15%;
    }

        .description .image .text {
            font-weight: 700;
            font-size: 1.125rem;
            color: #fff;
            margin-top: 85px;
        }

/* ===== IMPORTANT INFORMATIONS ===== */

.important-informations {
    position: relative;
    padding: 0px 0px 130px 0px;
}

    .important-informations h1 .important-informations .h1 {
        position: relative;
        z-index: 2;
        margin: 140px 0px 200px;
        color: #1672ac;
        font-size: 2.813rem;
    }

    .important-informations .hexagon {
        position: absolute;
        left: 350px;
        top: -100px;
        z-index: 0;
    }

    .important-informations .box {
        display: block;
        margin: 0px 0px 100px 0px;
    }

        .important-informations .box .image {
            display: inline-block;
            margin-right: 20px;
            width: 80px;
            vertical-align: middle;
        }

        .important-informations .box .text {
            display: inline-block;
            vertical-align: middle;
            width: calc( 100% - 110px );
        }

            .important-informations .box .text span {
                font-size: 1.125rem;
                color: #1672ac;
                font-family: 'DINProPl', sans-serif;
                font-weight: 500;
                line-height: 1em;
            }

    .important-informations .box-form {
        border: solid 3px #1672ac;
        display: block;
        padding: 35px 55px;
        font-weight: 700;
        font-size: 1.125rem;
    }

        .important-informations .box-form span {
            font-size: 15px;
            color: #f6d000;
            display: block;
            margin: 5px 0px 8px;
        }

        .important-informations .box-form .btn {
            padding: 5px 30px 7px;
            margin: 20px 20px 0px 0px;
        }

        .important-informations .box-form .form-control {
            margin-top: 10px;
        }

        .important-informations .box-form .form-small .btn {
            padding: 5px 9px 7px;
            margin: 13px 20px 0px 0px;
        }


/* ===== FOR WHO ===== */

.for-who {
    display: block;
    height: 950px;
    position: relative;
}

    .for-who .container-fluid {
        height: 950px;
        position: relative;
    }

    .for-who .for-who-content {
        position: absolute;
        bottom: 75px;
        left: 0px;
    }

    .for-who h1, .for-who .h1 {
        display: inline-block;
        color: #fff;
        margin-bottom: 50px;
    }

        .for-who h1 img, .for-who .h1 img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 25px;
        }

        .for-who h1 span, .for-who .h1 span {
            display: inline-block;
            vertical-align: middle;
        }

    .for-who .box {
        display: block;
        background: #fff;
        padding: 50px 60px 20px;
    }

        .for-who .box ul {
            padding: 0px;
        }

            .for-who .box ul li {
                list-style: none;
                width: 50%;
                display: block;
                margin: 0px 0px 30px;
                float: left;
                position: relative;
                padding: 0px 60px;
            }

            .for-who .box ul li:before {
                content: "";
                display: block;
                background: url( "../img/ok.svg" ) center center no-repeat;
                width: 25px;
                height: 19px;
                left: 0px;
                top: 8px;
                position: absolute;
                z-index: 1;
            }

/* ===== WHAT FOR ===== */

.what-for {
    position: relative;
}

    .what-for .top-content {
        position: relative;
    }

        .what-for .top-content .container-fluid {
            min-height: 1100px;
            position: relative;
        }

    .what-for h1, .what-for .h1 {
        margin: 150px 0px 180px;
    }

    .what-for .hexagon {
        position: absolute;
        top: -140px;
        right: 30px;
        z-index: 0;
    }

    .what-for .image-man {
        bottom: 0px;
        left: 60px;
        z-index: 0;
        position: absolute;
    }

    .what-for .text {

    }

        .what-for .text span {
            font-weight: 700;
            color: #1672ac;
        }

    .what-for ul {
        padding: 0px;
    }

        .what-for ul li {
            list-style: none;
            margin: 0px 0px 30px;
            position: relative;
            padding: 0px 0px 0px 60px;
        }

        .what-for ul li:before {
            content: "";
            display: block;
            background: url( "../img/ok.svg" ) center center no-repeat;
            width: 25px;
            height: 19px;
            left: 0px;
            top: 8px;
            position: absolute;
            z-index: 1;
        }

    .what-for .text-blue {
        margin-top: 60px;
    }

/* ===== APPLICATION ===== */

.application {
    background: #333333;
    text-align: center;
    color: #fff;
    padding: 0px 0px 70px 0px;
}

    .application h1, .application .h1 {
        margin-top: 80px;
        margin-bottom: 10px;
        color: #f6d000;
    }

    .application .text {
        text-align: center;
        margin-bottom: 80px;
    }

        .application .text span {
            color: #f6d000;
        }

    .application .box {
        color: #ffffff;
        font-weight: 700;
        font-size: 1.125rem;
    }

        .application .box span {
            font-family: 'DINProPl', sans-serif;
            color: #f6d000;
            font-size: 1.875rem
        }

    .application hr {
        border-color: #585858;
        margin: 50px 0px 35px;
    }

    .form-small .form-control {
        padding: 13px 30px;
        height: 44px;
        margin: 0px;
    }

    .application .btn-info {
        color: #fff;
    }

    .application .text-left {
        margin-bottom: 15px;
    }

/* ===== REDEMPTIONS ===== */

.redemptions {
    position: relative;
}

    .redemptions .top-content {
        position: relative;
    }

        .redemptions .top-content .container-fluid {
            min-height: 1450px;
            position: relative;
        }

    .redemptions h1, .redemptions .h1 {
        margin: 150px 0px 45px;
    }

    .redemptions .hexagon {
        position: absolute;
        z-index: 0;
    }

    .redemptions .text-blue {
        margin: 105px 0px 0px 190px;
        position: relative;
        z-index: 1;
    }

    .redemptions .image-woman {
        bottom: 0px;
        right: 10px;
        z-index: 0;
        position: absolute;
    }

    .redemptions .text {
        margin: 230px 0px 60px;
    }

    .redemptions .text span, .redemptions .text2 span {
        color: #1672ac;
        font-weight: 700;
    }

.redemptions ul {
    padding: 0px;
}

    .redemptions ul li {
        list-style: none;
        margin: 0px 0px 30px;
        position: relative;
        padding: 0px 0px 0px 25px;
    }

    .redemptions ul li:before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background: #295a79;
        left: 5px;
        top: 8px;
        position: absolute;
        z-index: 1;
        border-radius: 8px;
    }

    .redemptions .box-blue {
        padding: 90px 0px;
        background: #1672ac;
        color: #fff;
    }

        .redemptions .box-blue .speaker-text {
            font-size: 35px;
            color: #fff;
            font-weight: 300;
            vertical-align: middle;
            display: inline-block;
            line-height: 1.2em;
        }

            .redemptions .box-blue .speaker-text span {
                font-size: 63px;
                color: #f6d000;
                font-family: Roboto, sans-serif;
                font-weight: 500;
            }

            .redemptions .box-blue .speaker-text strong {
                font-weight: 700;
                color: #fff;
                font-size: 35px;
            }

        .redemptions .box-blue .speaker-image {
            vertical-align: middle;
            display: inline-block;
            margin-right: 30px;
        }

        .redemptions .box-blue li {
            margin-bottom: 10px;
        }

            .redemptions .box-blue ul li:before {
                background: #f6d000;
            }

    .redemptions .speaker-container {
        margin-top: 45px;
    }

/* ===== OPERATORS ===== */

.operators {
    position: relative;
}

    .operators .hexagon {
        position: absolute;
        right: 20px;
        top: -125px;
    }

    .operators h1, .operators .h1 {
        margin: 130px 0px 150px;
    }

    .operators .box {
        margin-bottom: 50px;
    }

        .operators .box .image {
            display: block;
            text-align: center;
        }

            .operators .box .image img {
                display: inline-block;
            }

        .operators .box .text {
            display: block;
        }

            .operators .box .text .link {
                display: block;
            }

                .operators .box .text .link a {
                    font-size: 15px;
                    color: #1672ac;
                    font-weight: 700;
                }

                    .operators .box .text .link a img {
                        margin-left: 20px;
                    }

/* ===== NEWS ===== */

.news {
    padding: 300px 0px 120px 0px;
}

    .news .top-content {
        margin-bottom: 140px;
        position: relative;
    }

    .news .hexagon {
        position: absolute;
        left: 100px;
        top: -240px;
    }

    .news h1, .news .h1 {

    }

    .news .btn-info {
        color: #1672ac;
        float: right;
        font-weight: 700;
    }

    .news .news-big {

    }

        .news .news-big .image {
            height: 300px;
            display: block;
        }

        .news .news-big .date {
            display: block;
            font-size: 13px;
            color: #cccccc;
            margin: 25px 0px 15px;
        }

        .news .news-big .text {
            color: #222;
        }

    .news .news-list {

    }

        .news .news-list ul {
            position: relative;
        }

        .news .news-list ul:before {
            content: "";
            display: block;
            height: 110%;
            width: 2px;
            background: #eeeeee;
            position: absolute;
            z-index: 1;
            left: 57px;
            top: -27px;
        }

            .news .news-list ul li {
                list-style: none;
                margin: 0px 0px 30px;
                position: relative;
                padding: 0px 0px 0px 70px;
            }

            .news .news-list ul li:before {
                content: "";
                display: block;
                background: url( "../img/hexa_small.svg" ) center center no-repeat;
                width: 36px;
                height: 31px;
                left: 0px;
                top: -4px;
                position: absolute;
                z-index: 1;
            }

/* ===== FAQ ===== */

.faq {
    background: #f7f7f7;
    padding-bottom: 100px;
    position: relative;
}

    .faq h1, .faq .h1 {
        margin: 130px 0px 100px;
    }

    .faq .hexagon {
        position: absolute;
        bottom: -80px;
        left: 30px;
        z-index: 0;
    }

.panel-default > .panel-heading {
    background-color: #fff;
    border: none !important;
    padding: 20px 30px;
}

.panel-default > .panel-heading img {
    float: right;
    margin-top: -8px;
}

.panel-title > a {
    text-decoration: none !important;
    color: #1672ac;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

.panel-group .panel {
    border-radius: 0px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.panel-title {
    display: block;
}

.panel-body {
    padding: 15px 30px 35px;
}

/* ===== CONTACT ===== */

.contact {

}

.form-control {
    padding: 24px 20px;
    font-size: 13px;
    color: #333333 !important;
    border-radius: 0px;
    height: 62px;
    margin-bottom: 35px;
}

    .contact h1, .contact .h1 {
        margin: 290px 0px 70px;
    }

    .contact .form-vertical .btn-primary {
        padding: 10px 60px;
    }

    .contact .right-col-container {
        position: relative;
        top: -250px;
    }

        .contact .right-col-container .box-yellow {
            background: #f6d000;
            padding: 100px;
            margin-top: -106px;
        }

            .contact .right-col-container .box-yellow .box {
                display: block;
                margin: 0px 0px 60px 0px;
            }

            .contact .right-col-container .box-yellow h4 {
                margin: 0px 0px 40px 0px;
                font-size: 1.625rem;
            }

                .contact .right-col-container .box-yellow .box .image {
                    display: inline-block;
                    margin-right: 35px;
                    vertical-align: middle;
                }

                .contact .right-col-container .box-yellow .box .text {
                    display: inline-block;
                    vertical-align: middle;
                }

                    .contact .right-col-container .box-yellow .box .text strong {
                        font-family: 'DINProPl', sans-serif;
                    }

                    .contact .right-col-container .box-yellow .box .text span {
                        font-weight: 700;
                        color: #1672ac;
                        font-size: 1.625rem;
                    }

            .contact .right-col-container .box-yellow hr {
                margin: 0px 0px 50px;
                border-bottom: 1px solid #1672ac;
            }

            .contact .right-col-container .box-yellow .btn-primary {
                border: solid 3px #fff !important;
                padding: 8px 30px;
            }

    .contact .contact-image {

    }

textarea.form-control {
    min-height: 350px;
}

        .contact .form-small .form-control {
            color: #fff !important;
            border: solid 2px #fff;
            background: transparent;
        }

        .contact .form-small .form-control::-moz-placeholder {
            color: #fff !important;
        }

        .contact .form-small .btn-info {
            padding: 10px 20px 12px;
        }

/* ===== MENU COLOR CHANGE ===== */

.menu-color-change {
    position: fixed;
    top: 90px;
    right: -100vw;
    display: block;
    background: #fff;
    z-index: 50;
    width: 100%;
    text-align: center;
    padding: 15px;
    transition: 1s all;
}

.menu-color-change.active {
    right: 0px;
}

    .menu-color-change .box {
        cursor: pointer;
        width: 100px;
        height: 100px;
        background: #fff;
        color: #bbb;
        font-family: DINProPl, sans-serif;
        font-size: 20px;
        font-weight: 700;
        border: solid 5px #ddd;
        text-align: center;
        display: inline-block;
        margin: 10px;
        padding: 28px 0px;
    }

.menu-color-change #box-2 {
    border-color: #000;
    background: #fff;
    color: #000;
}

.menu-color-change #box-3 {
    border-color: #fff;
    background: #000;
    color: #fff;
}

.menu-color-change #box-4 {
    border-color: #000;
    background: #ffff00;
    color: #000;
}

.menu-color-change #box-5 {
    border-color: #ffff00;
    background: #000;
    color: #ffff00;
}

.menu-color-change #box-6 {
    border-color: #000;
    background: #00ff33;
    color: #000;
}

.menu-color-change #box-7 {
    border-color: #00ff33;
    background: #000;
    color: #00ff33;
}

.menu-color-change #box-8 {
    border-color: #ffff00;
    background: #0033cc;
    color: #ffff00;
}

.menu-color-change #box-9 {
    border-color: #0033cc;
    background: #ffff00;
    color: #0033cc;
}

/* ===== BUSINES START ===== */

.busines-start {
    margin-top: 90px;
}

    .busines-start h1, .busines-start .h1 {
        margin-bottom: 8px;
    }

.description {
    font-size: 1.125rem;
    font-weight: 500;
    font-family: Roboto, sans-serif;
    line-height: 1.3em;
}

    .busines-start .box {
        display: block;
        height: 800px;
        padding: 0px 15% 0px 25%;
    }

        .busines-start .box .description {
            color: #1672ac;
            margin-bottom: 65px;
        }

    .busines-start .image {
        display: block;
        height: 800px;
    }

        .busines-start .image .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 800px 0 0 250px;
            border-color: transparent transparent transparent #fff;
        }

/* ===== BUSINES INSTYTUTIONS ===== */

.busines-instytutions {
    padding: 130px 0px;
    background: #1672ac;
    display: block;
    color: #fff;
}

    .busines-instytutions h1, .busines-instytutions .h1 {
        margin-bottom: 8px;
        color: #fff;
    }

/* ===== BUSINES EDUCATION ===== */

.busines-education {
    padding: 0px 0px 160px 0px;
}

    .busines-education h1, .busines-education .h1 {
        margin: 180px 0px 8px;
    }

    .busines-education .description {
        color: #1672ac;
        margin-bottom: 65px;
    }

    .busines-education .text-blue {
        text-align: center;
        color: #444444;
    }

    .busines-education .hexagon {
        margin: -110px 0px 85px;
        text-align: center;
    }

/* ===== BUSINES FORMAL ===== */

.busines-formal {

}

.busines-formal h1, .busines-formal .h1 {
    margin-bottom: 8px;
    color: #222;
}

    .busines-formal .box {
        display: block;
        height: 800px;
        padding: 0px 25% 0px 5%;
        background: #f6d000;
    }

        .busines-formal .box .description {
            margin-bottom: 65px;
        }

    .busines-formal .image {
        display: block;
        height: 800px;
    }

        .busines-formal .image .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 250px 800px 0;
            border-color: transparent #f6d000 transparent;
            float: right;
        }

/* ===== BUSINES DOWNLOAD ===== */

.busines-download {
    padding-bottom: 100px;
}

    .busines-download h1, .busines-download .h1 {
        margin-top: 130px;
    }

    .busines-download .description {
        margin-bottom: 70px;
        color: #1672ac;
    }

    .busines-download .download {
        display: inline-block;
        margin: 20px;
        color: #222;
    }

        .busines-download .download img {
            margin-bottom: 24px;
        }

        .busines-download .download span {

        }

/* ==================== BIG FONT ==================== */

html.big-font {
    font-size: 20px;
}

html.big-font body {
    font-size: 20px;
}

/* ==================== COLORS ==================== */

.color-2 h1, .color-2 h2, .color-2 h3, .color-2 h4, .color-2 h5, .color-2 p, .color-2 p span, .color-2 .btn, .color-2 .start .text, .color-2 .text-blue, .color-2 .important-informations .box .text,
.color-2 .important-informations .box .text span, .color-2 li, .color-2 .panel-body, .color-2 .operators .box .text .link a, .color-2 .panel-title > a, .color-2 .contact .right-col-container .box-yellow .box,
.color-2 .redemptions .text span, .color-2 .redemptions .text2 span, .color-2 .start .text h2 span, .color-2 .what-for .box-black .box, .color-2 .redemptions .box-blue .speaker-text, .color-2 .what-for .box-black .box .text,
.color-2 .what-for .box-black .box .hexagon-count, .color-2 .redemptions .box-blue .speaker-text strong, .color-2 .redemptions .box-blue .speaker-text span, .color-2 .contact .right-col-container .box-yellow .box .text span,
.color-2 .menu ul li a, .color-2 .box-yellow, .color-2 .panel-heading, body.color-2, .color-2 .for-who .box, .color-2 .menu, .color-2 .box-black, .color-2 .box-blue, .color-2 footer,
.color-2.busines-start .box .description, .color-2 .busines-instytutions, .color-2 .description, .color-2 .busines-formal .box, .color-2 .busines-download .download, .color-2 .application .text span,
.color-2 .application .box span, .color-2 .application .box, .color-2 .application, .color-2 .start .bottom-text, .color-2 .start .bottom-text span {
    background: #fff !important;
    color: #000 !important;
}

.color-2 .btn-default, .color-2 .btn-primary {
    border-color: #000 !important;
}

.color-2 .busines-start .image .triangle {
    border-color: transparent transparent transparent #fff;
}

.color-2 .busines-formal .image .triangle {
    border-color: transparent #fff transparent;
}

.color-3 h1, .color-3 h2, .color-3 h3, .color-3 h4, .color-3 h5, .color-3 p, .color-3 p span, .color-3 .btn, .color-3 .start .text, .color-3 .text-blue, .color-3 .important-informations .box .text,
.color-3 .important-informations .box .text span, .color-3 li, .color-3 .panel-body, .color-3 .operators .box .text .link a, .color-3 .panel-title > a, .color-3 .contact .right-col-container .box-yellow .box,
.color-3 .redemptions .text span, .color-3 .redemptions .text2 span, .color-3 .start .text h2 span, .color-3 .what-for .box-black .box, .color-3 .redemptions .box-blue .speaker-text, .color-3 .what-for .box-black .box .text,
.color-3 .what-for .box-black .box .hexagon-count, .color-3 .redemptions .box-blue .speaker-text strong, .color-3 .redemptions .box-blue .speaker-text span, .color-3 .contact .right-col-container .box-yellow .box .text span,
.color-3 .menu ul li a, .color-3 .box-yellow, .color-3 .panel-heading, body.color-3, .color-3 .for-who .box, .color-3 .menu, .color-3 .box-black, .color-3 .box-blue, .color-3 footer,
.color-3.busines-start .box .description, .color-3 .busines-instytutions, .color-3 .description, .color-3 .busines-formal .box, .color-3 .busines-download .download, .color-3 .application .text span,
.color-3 .application .box span, .color-3 .application .box, .color-3 .application, .color-3 .start .bottom-text, .color-3 .start .bottom-text span {
    background: #000 !important;
    color: #fff !important;
}

.color-3 .btn-default, .color-3 .btn-primary {
    border-color: #fff !important;
    background: #000 !important;
}

.color-3 .busines-start .image .triangle {
    border-color: transparent transparent transparent #000;
}

.color-3 .busines-formal .image .triangle {
    border-color: transparent #000 transparent;
}

.color-4 h1, .color-4 h2, .color-4 h3, .color-4 h4, .color-4 h5, .color-4 p, .color-4 p span, .color-4 .btn, .color-4 .start .text, .color-4 .text-blue, .color-4 .important-informations .box .text,
.color-4 .important-informations .box .text span, .color-4 li, .color-4 .panel-body, .color-4 .operators .box .text .link a, .color-4 .panel-title > a, .color-4 .contact .right-col-container .box-yellow .box,
.color-4 .redemptions .text span, .color-4 .redemptions .text2 span, .color-4 .start .text h2 span, .color-4 .what-for .box-black .box, .color-4 .redemptions .box-blue .speaker-text, .color-4 .what-for .box-black .box .text,
.color-4 .what-for .box-black .box .hexagon-count, .color-4 .redemptions .box-blue .speaker-text strong, .color-4 .redemptions .box-blue .speaker-text span, .color-4 .contact .right-col-container .box-yellow .box .text span,
.color-4 .menu ul li a, .color-4 .box-yellow, .color-4 .panel-heading, body.color-4, .color-4 .for-who .box, .color-4 .menu, .color-4 .box-black, .color-4 .box-blue, .color-4 footer,
.color-4.busines-start .box .description, .color-4 .busines-instytutions, .color-4 .description, .color-4 .busines-formal .box, .color-4 .busines-download .download, .color-4 .application .text span,
.color-4 .application .box span, .color-4 .application .box, .color-4 .application, .color-4 .start .bottom-text, .color-4 .start .bottom-text span {
    background: #ffff00 !important;
    color: #000 !important;
}

.color-4 .btn-default, .color-4 .btn-primary {
    border-color: #000 !important;
    background: #ffff00 !important;
}

.color-4.busines-start .image .triangle {
    border-color: transparent transparent transparent #ffff00;
}

.color-4 .busines-formal .image .triangle {
    border-color: transparent #ffff00 transparent;
}

.color-5 h1, .color-5 h2, .color-5 h3, .color-5 h4, .color-5 h5, .color-5 p, .color-5 p span, .color-5 .btn, .color-5 .start .text, .color-5 .text-blue, .color-5 .important-informations .box .text,
.color-5 .important-informations .box .text span, .color-5 li, .color-5 .panel-body, .color-5 .operators .box .text .link a, .color-5 .panel-title > a, .color-5 .contact .right-col-container .box-yellow .box,
.color-5 .redemptions .text span, .color-5 .redemptions .text2 span, .color-5 .start .text h2 span, .color-5 .what-for .box-black .box, .color-5 .redemptions .box-blue .speaker-text, .color-5 .what-for .box-black .box .text,
.color-5 .what-for .box-black .box .hexagon-count, .color-5 .redemptions .box-blue .speaker-text strong, .color-5 .redemptions .box-blue .speaker-text span, .color-5 .contact .right-col-container .box-yellow .box .text span,
.color-5 .menu ul li a, .color-5 .box-yellow, .color-5 .panel-heading, body.color-5, .color-5 .for-who .box, .color-5 .menu, .color-5 .box-black, .color-5 .box-blue, .color-5 footer,
.color-5.busines-start .box .description, .color-5 .busines-instytutions, .color-5 .description, .color-5 .busines-formal .box, .color-5 .busines-download .download, .color-5 .application .text span,
.color-5 .application .box span, .color-5 .application .box, .color-5 .application, .color-5 .start .bottom-text, .color-5 .start .bottom-text span {
    background: #000 !important;
    color: #ffff00 !important;
}

.color-5 .btn-default, .color-5 .btn-primary {
    border-color: #ffff00 !important;
    background: #000 !important;
}

.color-5 .busines-start .image .triangle {
    border-color: transparent transparent transparent #000;
}

.color-5 .busines-formal .image .triangle {
    border-color: transparent #000 transparent;
}

.color-6 h1, .color-6 h2, .color-6 h3, .color-6 h4, .color-6 h5, .color-6 p, .color-6 p span, .color-6 .btn, .color-6 .start .text, .color-6 .text-blue, .color-6 .important-informations .box .text,
.color-6 .important-informations .box .text span, .color-6 li, .color-6 .panel-body, .color-6 .operators .box .text .link a, .color-6 .panel-title > a, .color-6 .contact .right-col-container .box-yellow .box,
.color-6 .redemptions .text span, .color-6 .redemptions .text2 span, .color-6 .start .text h2 span, .color-6 .what-for .box-black .box, .color-6 .redemptions .box-blue .speaker-text, .color-6 .what-for .box-black .box .text,
.color-6 .what-for .box-black .box .hexagon-count, .color-6 .redemptions .box-blue .speaker-text strong, .color-6 .redemptions .box-blue .speaker-text span, .color-6 .contact .right-col-container .box-yellow .box .text span,
.color-6 .menu ul li a, .color-6 .box-yellow, .color-6 .panel-heading, body.color-6, .color-6 .for-who .box, .color-6 .menu, .color-6 .box-black, .color-6 .box-blue, .color-6 footer,
.color-6.busines-start .box .description, .color-6 .busines-instytutions, .color-6 .description, .color-6 .busines-formal .box, .color-6 .busines-download .download, .color-6 .application .text span,
.color-6 .application .box span, .color-6 .application .box, .color-6 .application, .color-6 .start .bottom-text, .color-6 .start .bottom-text span {
    background: #00ff33 !important;
    color: #000 !important;
}

.color-6 .btn-default, .color-6 .btn-primary {
    border-color: #000 !important;
    background: #00ff33 !important;
}

.color-6 .busines-start .image .triangle {
    border-color: transparent transparent transparent #00ff33;
}

.color-6 .busines-formal .image .triangle {
    border-color: transparent #00ff33 transparent;
}

.color-7 h1, .color-7 h2, .color-7 h3, .color-7 h4, .color-7 h5, .color-7 p, .color-7 p span, .color-7 .btn, .color-7 .start .text, .color-7 .text-blue, .color-7 .important-informations .box .text,
.color-7 .important-informations .box .text span, .color-7 li, .color-7 .panel-body, .color-7 .operators .box .text .link a, .color-7 .panel-title > a, .color-7 .contact .right-col-container .box-yellow .box,
.color-7 .redemptions .text span, .color-7 .redemptions .text2 span, .color-7 .start .text h2 span, .color-7 .what-for .box-black .box, .color-7 .redemptions .box-blue .speaker-text, .color-7 .what-for .box-black .box .text,
.color-7 .what-for .box-black .box .hexagon-count, .color-7 .redemptions .box-blue .speaker-text strong, .color-7 .redemptions .box-blue .speaker-text span, .color-7 .contact .right-col-container .box-yellow .box .text span,
.color-7 .menu ul li a, .color-7 .box-yellow, .color-7 .panel-heading, body.color-7, .color-7 .for-who .box, .color-7 .menu, .color-7 .box-black, .color-7 .box-blue, .color-7 footer,
.color-7.busines-start .box .description, .color-7 .busines-instytutions, .color-7 .description, .color-7 .busines-formal .box, .color-7 .busines-download .download, .color-7 .application .text span,
.color-7 .application .box span, .color-7 .application .box, .color-7 .application, .color-7 .start .bottom-text, .color-7 .start .bottom-text span {
    background: #000 !important;
    color: #00ff33 !important;
}

.color-7 .btn-default, .color-7 .btn-primary {
    border-color: #00ff33 !important;
    background: #000 !important;
}

.color-7 .busines-start .image .triangle {
    border-color: transparent transparent transparent #000;
}

.color-7 .busines-formal .image .triangle {
    border-color: transparent #000 transparent;
}

.color-8 h1, .color-8 h2, .color-8 h3, .color-8 h4, .color-8 h5, .color-8 p, .color-8 p span, .color-8 .btn, .color-8 .start .text, .color-8 .text-blue, .color-8 .important-informations .box .text,
.color-8 .important-informations .box .text span, .color-8 li, .color-8 .panel-body, .color-8 .operators .box .text .link a, .color-8 .panel-title > a, .color-8 .contact .right-col-container .box-yellow .box,
.color-8 .redemptions .text span, .color-8 .redemptions .text2 span, .color-8 .start .text h2 span, .color-8 .what-for .box-black .box, .color-8 .redemptions .box-blue .speaker-text, .color-8 .what-for .box-black .box .text,
.color-8 .what-for .box-black .box .hexagon-count, .color-8 .redemptions .box-blue .speaker-text strong, .color-8 .redemptions .box-blue .speaker-text span, .color-8 .contact .right-col-container .box-yellow .box .text span,
.color-8 .menu ul li a, .color-8 .box-yellow, .color-8 .panel-heading, body.color-8, .color-8 .for-who .box, .color-8 .menu, .color-8 .box-black, .color-8 .box-blue, .color-8 footer,
.color-8.busines-start .box .description, .color-8 .busines-instytutions, .color-8 .description, .color-8 .busines-formal .box, .color-8 .busines-download .download, .color-8 .application .text span,
.color-8 .application .box span, .color-8 .application .box, .color-8 .application, .color-8 .start .bottom-text, .color-8 .start .bottom-text span {
    background: #0033cc !important;
    color: #ffff00 !important;
}

.color-8 .btn-default, .color-8 .btn-primary {
    border-color: #ffff00 !important;
    background: #0033cc !important;
}

.color-8 .busines-start .image .triangle {
    border-color: transparent transparent transparent #0033cc;
}

.color-8 .busines-formal .image .triangle {
    border-color: transparent #0033cc transparent;
}

.color-9 h1, .color-9 h2, .color-9 h3, .color-9 h4, .color-9 h5, .color-9 p, .color-9 p span, .color-9 .btn, .color-9 .start .text, .color-9 .text-blue, .color-9 .important-informations .box .text,
.color-9 .important-informations .box .text span, .color-9 li, .color-9 .panel-body, .color-9 .operators .box .text .link a, .color-9 .panel-title > a, .color-9 .contact .right-col-container .box-yellow .box,
.color-9 .redemptions .text span, .color-9 .redemptions .text2 span, .color-9 .start .text h2 span, .color-9 .what-for .box-black .box, .color-9 .redemptions .box-blue .speaker-text, .color-9 .what-for .box-black .box .text,
.color-9 .what-for .box-black .box .hexagon-count, .color-9 .redemptions .box-blue .speaker-text strong, .color-9 .redemptions .box-blue .speaker-text span, .color-9 .contact .right-col-container .box-yellow .box .text span,
.color-9 .menu ul li a, .color-9 .box-yellow, .color-9 .panel-heading, body.color-9, .color-9 .for-who .box, .color-9 .menu, .color-9 .box-black, .color-9 .box-blue, .color-9 footer,
.color-9.busines-start .box .description, .color-9 .busines-instytutions, .color-9 .description, .color-9 .busines-formal .box, .color-9 .busines-download .download, .color-9 .application .text span,
.color-9 .application .box span, .color-9 .application .box, .color-9 .application, .color-9 .start .bottom-text, .color-9 .start .bottom-text span {
    background: #ffff00 !important;
    color: #0033cc !important;
}

.color-9 .btn-default, .color-9 .btn-primary {
    border-color: #0033cc !important;
    background: #ffff00 !important;
}

.color-9 .busines-start .image .triangle {
    border-color: transparent transparent transparent #ffff00;
}

.color-9 .busines-formal .image .triangle {
    border-color: transparent #ffff00 transparent;
}