@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic|Source+Code+Pro:400");

/*
    Read Only by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Reset */

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, l, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
        min-height: 100vh;         
        position: relative;          
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    body {
        -webkit-text-size-adjust: none;
    }

/* Box Model */

    *, *:before, *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

/* Containers */

    .container {
        margin-left: auto;
        margin-right: auto;        
    }


    
/* Basic */

    body {
        background: #fff;
    }

    body, input, select, textarea {
        color: #888;
        font-family: "Poppins", sans-serif;
        font-size: 16pt;
        font-weight: 400;
        line-height: 1.75em;
    }

    a {
        -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        
        color: inherit;
        text-decoration: none;
    }

        a:hover {
            border-bottom-color: transparent;
            color: #707174 !important;
        }

    strong, b {
        color: #777777;
        font-weight: 700;
    }

    em, i {
        font-style: italic;
    }

    p {
        margin: 0 0 2.25em 0;        
    }

    h1, h2, h3, h4, h5, h6 {
        color: #777777;
        font-weight: 700;
        line-height: 1em;
        margin: 0 0 0.5625em 0;
    }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            border: 0;
            color: inherit;
            text-decoration: none;
        }

    h2 {
        font-size: 1.7em;
        line-height: 1.5em;
    }

    h3 {
        font-size: 1.75em;
        line-height: 1.5em;
    }

    h4 {
        font-size: 1.25em;
        line-height: 1.5em;
    }

    h5 {
        font-size: 0.9em;
        line-height: 1.5em;
    }

    h6 {
        font-size: 0.7em;
        line-height: 1.5em;
    }

    sub {
        font-size: 0.8em;
        position: relative;
        top: 0.5em;
    }

    sup {
        font-size: 0.8em;
        position: relative;
        top: -0.5em;
    }

    hr {
        border: 0;
        border-bottom: solid 2px #ce1010;
        margin: 2.25em 0;        
    }

        hr.major {
            margin: 3.375em 0;
        }

    blockquote {
        border-left: solid 8px #e4e4e4;
        font-style: italic;
        margin: 0 0 2.25em 0;
        padding: 0.5em 0 0.5em 2em;
    }

    code {
        background: #555;
        border-radius: 5px;
        color: #fff;
        font-family: "Source Code Pro", monospace;
        font-size: 0.9em;
        margin: 0 0.25em;
        padding: 0.25em 0.65em;
    }

    pre {
        font-family: "Source Code Pro", monospace;
        font-size: 0.9em;
        margin: 0 0 2.25em 0;
    }

        pre code {
            -webkit-overflow-scrolling: touch;
            display: block;
            line-height: 1.5em;
            overflow-x: auto;
            padding: 1em 1.5em;
        }

    .align-left {
        text-align: left;
    }

    .align-center {
        text-align: center;
    }

    .align-right {
        text-align: right;
    }

/* Section/Article */

    section.special, article.special {
        text-align: center;
    }

    header p, ul {
        color: #747171;
        position: relative;
        margin: 0 12em 1.6875em 0;
    }

    header h2 + p {
        font-size: 1.25em;
        margin-top: -0.5em;
        line-height: 1.5em;
        margin-right: 10em;
    }

    header h3 + p {
        font-size: 1.1em;
        margin-top: -0.35em;
        line-height: 1.5em;
    }

    header h4 + p,
    header h5 + p,
    header h6 + p {
        font-size: 0.9em;
        margin-top: -0.25em;
        line-height: 1.5em;
    }

    header.major h2 {
        color: #3566eb;
        font-size: 2em;
        width: 100%;
        white-space: nowrap;
    }

        header.major h2 + p {
            color: #777777;
            font-size: 1.3em;
            font-weight: 700;
            margin-top: -0.75em;
            margin-right: 24em;
            text-align: left;          
        }

/* Form */

    form {
        margin: 0 0 2.25em 0;
    }

    label {
        color: #777777;
        display: block;
        font-size: 0.9em;
        font-weight: 700;
        margin: 0 0 1.125em 0;
    }

    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border-radius: 5px;
        border: none;
        border: solid 2px #e4e4e4;
        color: inherit;
        display: block;
        outline: 0;
        padding: 0 1em;
        text-decoration: none;
        width: 100%;
    }

        input[type="text"]:invalid,
        input[type="password"]:invalid,
        input[type="email"]:invalid,
        select:invalid,
        textarea:invalid {
            box-shadow: none;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus,
        select:focus,
        textarea:focus {
            border-color: #3566eb;
        }

    .select-wrapper {
        text-decoration: none;
        display: block;
        position: relative;
    }

        .select-wrapper:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        .select-wrapper:before {
            color: #e4e4e4;
            content: '\f078';
            display: block;
            height: 2.75em;
            line-height: 2.75em;
            pointer-events: none;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            width: 2.75em;
        }

        .select-wrapper select::-ms-expand {
            display: none;
        }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    select {
        height: 2.75em;
    }

    textarea {
        padding: 0.75em 1em;
    }

    input[type="checkbox"],
    input[type="radio"] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        display: block;
        float: left;
        margin-right: -2em;
        opacity: 0;
        width: 1em;
        z-index: -1;
    }

        input[type="checkbox"] + label,
        input[type="radio"] + label {
            text-decoration: none;
            color: #888;
            cursor: pointer;
            display: inline-block;
            font-size: 1em;
            font-weight: 400;
            padding-left: 2.4em;
            padding-right: 0.75em;
            position: relative;
        }

            input[type="checkbox"] + label:before,
            input[type="radio"] + label:before {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                text-transform: none !important;
            }

            input[type="checkbox"] + label:before,
            input[type="radio"] + label:before {
                background: #fafafa;
                border-radius: 5px;
                border: solid 2px #e4e4e4;
                content: '';
                display: inline-block;
                height: 1.65em;
                left: 0;
                line-height: 1.58125em;
                position: absolute;
                text-align: center;
                top: 0;
                width: 1.65em;
            }

        input[type="checkbox"]:checked + label:before,
        input[type="radio"]:checked + label:before {
            background: #989898;
            border-color: #989898;
            color: #ffffff;
            content: '\f00c';
        }

        input[type="checkbox"]:focus + label:before,
        input[type="radio"]:focus + label:before {
            border-color: #3566eb;
        }

    input[type="checkbox"] + label:before {
        border-radius: 5px;
    }

    input[type="radio"] + label:before {
        border-radius: 100%;
    }

    ::-webkit-input-placeholder {
        color: #aaa !important;
        font-style: italic;
        opacity: 1.0;
    }

    :-moz-placeholder {
        color: #aaa !important;
        font-style: italic;
        opacity: 1.0;
    }

    ::-moz-placeholder {
        color: #aaa !important;
        font-style: italic;
        opacity: 1.0;
    }

    :-ms-input-placeholder {
        color: #aaa !important;
        font-style: italic;
        opacity: 1.0;
    }

    .formerize-placeholder {
        color: #aaa !important;
        font-style: italic;
        opacity: 1.0;
    }

/* Box */

    .box {
        border-radius: 5px;
        border: solid 2px #e4e4e4;
        margin-bottom: 2.25em;
        padding: 1.5em;
    }

        .box > :last-child,
        .box > :last-child > :last-child,
        .box > :last-child > :last-child > :last-child {
            margin-bottom: 0;
        }

        .box.alt {
            border: 0;
            border-radius: 0;
            padding: 0;
        }

/* Icon */

    .icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }

        .icon:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        .icon > .label {
            display: none;
        }

/* Image */

    .image {        

        border: 0;
        display: inline-block;
        position: relative;
    }

        .image img {
            
            display: block;
        }

        .image.left {
            float: left;
            margin: 0 2.5em 2em 0;
            top: 0.25em;
        }

        .image.right {
            float: right;
            margin: 0 0 2em 2.5em;
            top: 0.25em;
        }
        

        .topimage {                      
            height: 5em;
            overflow: hidden;            
        }

            .topimage > img {
                width: 100%;                
            }

        .logo {                   
            padding: 0.5em 1.2em 0em 1.5em;
            height: 100%;                 
            display: block;
            overflow: hidden;
            position: absolute;
        }
        .logo a img {
            width: 7em;
        }        

        .rolunk.keret {
            align-self: right;
            float: right;
            width: 30em;
            height: 30em;
            display: block;
            margin: 3em 0em auto 1em;
            z-index: 1;            
        }

        .image.rolunk {            
            top: 0.25em;
            width: 25em;
            margin: 3em 2em 0em 1em;
            z-index: 1;
            position: relative;
        }

        .klimak.keret {
            align-self: right;
            float: right;
            width: auto;
            height: auto;
            display: block;
            margin: -4em 3em 5em 1.5em;
            z-index: 1;
        }    

        .jobbra.keret { 
            float: right;            
            display: relative;            
            align-items: center;  
            white-space: nowrap;         
        }

            .jobbra.keret img {
                width: 20em;
                margin-top: 1em;                               
                padding: 15px;
                display: flex;
                flex-direction: column;
            }            


        .ref.keret {                                   
            width: 50%;
            float: left;
            height: auto;
            display: block;
            z-index: 1;
            position: relative;
        }

        .image.refleft { 
            border: solid rgba(128, 128, 128, 0.432) 0.25em;          
            width: 27em;
            overflow: hidden;            
            z-index: 1;
            display:relative;
            float: right;
            margin: 1em 2em 2em 0em;                                             
        }

        .image.refright { 
            border: solid rgba(128, 128, 128, 0.432) 0.25em;          
            width: 27em;
            overflow: hidden;            
            z-index: 1;
            display:relative;
            float: left;
            margin: 1em 0em 2em 0em;                                           
        }

        .image.center {
            margin: 1.5em auto 2em auto;
            display: block;
            width: 40em;
            overflow: hidden;
        }

        .image.energetika {
            width: 40em;
        }

        .image.fit {
            display: block;
            margin: 0 0 2.25em 0;
            width: 100%;
        }

            .image.fit img {
                display: block;
                width: 100%;
            }

        .image.avatar {
            
            overflow: hidden;
            border-bottom: none;            
        }

            .image.avatar img {
                
                border-bottom: none;                
                display: block;
                width: 100%;
                margin-left: 1em;
            }

/* List */

    ol {
        list-style: decimal;
        margin: 0 0 2.25em 0;
        padding-left: 1.25em;
    }

        ol li {
            padding-left: 0.25em;
        }

    ul {
        list-style-type: "➠";
        margin: 0 0 2.25em 0;
        padding-left: 1em;        
    }

        ul li {
            padding-left: 0.5em;
        }

        ul.alt {
            list-style: none;
            padding-left: 0;
        }

            ul.alt li {
                border-top: solid 2px #f4f4f4;
                padding: 0.5em 0;
            }

                ul.alt li:first-child {
                    border-top: 0;
                    padding-top: 0;
                }

        ul.feature-icons {
            list-style: none;
            padding-left: 0;
        }

            ul.feature-icons li {
                text-decoration: none;
                display: inline-block;
                margin: 0 0 1.6875em 0;
                padding: 0.35em 0 0 3.5em;
                position: relative;
                vertical-align: top;
                width: 48%;
            }

                ul.feature-icons li:before {
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    text-transform: none !important;
                }

                ul.feature-icons li:before {
                    background: #3dc4c7;
                    border-radius: 100%;
                    color: #ffffff;
                    display: block;
                    height: 2.5em;
                    left: 0;
                    line-height: 2.5em;
                    position: absolute;
                    text-align: center;
                    top: 0;
                    width: 2.5em;
                }

        ul.icons {
            cursor: default;
            list-style: none;
            padding-left: 0;
        }

            ul.icons li {
                display: inline-block;
                padding: 0 1em 0 0;
            }

                ul.icons li:last-child {
                    padding-right: 0 !important;
                }

                ul.icons li .icon:before {
                    font-size: 1.25em;
                }

        ul.actions {
            cursor: default;
            list-style: none;
            padding-left: 0;
        }

            ul.actions li {
                display: inline-block;
                padding: 0 1.125em 0 0;
                vertical-align: middle;
            }

                ul.actions li:last-child {
                    padding-right: 0;
                }

            ul.actions.small li {
                padding: 0 0.5625em 0 0;
            }

            ul.actions.vertical li {
                display: block;
                padding: 1.125em 0 0 0;
            }

                ul.actions.vertical li:first-child {
                    padding-top: 0;
                }

                ul.actions.vertical li > * {
                    margin-bottom: 0;
                }

            ul.actions.vertical.small li {
                padding: 0.5625em 0 0 0;
            }

                ul.actions.vertical.small li:first-child {
                    padding-top: 0;
                }

            ul.actions.fit {
                display: table;
                margin-left: -1.125em;
                padding: 0;
                table-layout: fixed;
                width: calc(100% + 1.125em);
            }

                ul.actions.fit li {
                    display: table-cell;
                    padding: 0 0 0 1.125em;
                }

                    ul.actions.fit li > * {
                        margin-bottom: 0;
                    }

                ul.actions.fit.small {
                    margin-left: -0.5625em;
                    width: calc(100% + 0.5625em);
                }

                    ul.actions.fit.small li {
                        padding: 0 0 0 0.5625em;
                    }

    dl {
        margin: 0 0 2.25em 0;
    }

/* Table */

    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    table {
        margin: 0 0 2.25em 0;
        width: 100%;
    }

        table tbody tr {
            border: solid 2px #f4f4f4;
            border-left: 0;
            border-right: 0;
        }

            table tbody tr:nth-child(2n + 1) {
                background-color: #fafafa;
            }

        table td {
            padding: 0.75em 0.75em;
        }

        table th {
            color: #777777;
            font-size: 0.9em;
            font-weight: 700;
            padding: 0 0.75em 0.75em 0.75em;
            text-align: left;
        }

        table thead {
            border-bottom: solid 4px #e4e4e4;
        }

        table tfoot {
            border-top: solid 4px #e4e4e4;
        }

        table.alt {
            border-collapse: separate;
        }

            table.alt tbody tr td {
                border: solid 2px #e4e4e4;
                border-left-width: 0;
                border-top-width: 0;
            }

                table.alt tbody tr td:first-child {
                    border-left-width: 2px;
                }

            table.alt tbody tr:first-child td {
                border-top-width: 2px;
            }

            table.alt thead {
                border-bottom: 0;
            }

            table.alt tfoot {
                border-top: 0;
            }

/* Button */

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    .button {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: #989898;
        border-radius: 5px;
        border: 0;
        color: #ffffff !important;
        cursor: pointer;
        display: inline-block;
        font-weight: 700;
        height: 2.75em;
        line-height: 2.75em;
        padding: 0 1.5em;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

        input[type="submit"]:hover,
        input[type="reset"]:hover,
        input[type="button"]:hover,
        .button:hover {
            background-color: #a5a5a5;
            color: #ffffff !important;
        }

        input[type="submit"]:active,
        input[type="reset"]:active,
        input[type="button"]:active,
        .button:active {
            background-color: #8b8b8b;
        }

        input[type="submit"].icon,
        input[type="reset"].icon,
        input[type="button"].icon,
        .button.icon {
            padding-left: 1.35em;
        }

            input[type="submit"].icon:before,
            input[type="reset"].icon:before,
            input[type="button"].icon:before,
            .button.icon:before {
                margin-right: 0.5em;
            }

        input[type="submit"].fit,
        input[type="reset"].fit,
        input[type="button"].fit,
        .button.fit {
            display: block;
            margin: 0 0 1.125em 0;
            width: 100%;
        }

        input[type="submit"].small,
        input[type="reset"].small,
        input[type="button"].small,
        .button.small {
            font-size: 0.8em;
        }

        input[type="submit"].big,
        input[type="reset"].big,
        input[type="button"].big,
        .button.big {
            font-size: 1.35em;
        }

        input[type="submit"].alt,
        input[type="reset"].alt,
        input[type="button"].alt,
        .button.alt {
            background-color: transparent;
            box-shadow: inset 0 0 0 2px #e4e4e4;
            color: #777777 !important;
        }

            input[type="submit"].alt:hover,
            input[type="reset"].alt:hover,
            input[type="button"].alt:hover,
            .button.alt:hover {
                background-color: #f4f4f4;
                color: #777777 !important;
            }

            input[type="submit"].alt:active,
            input[type="reset"].alt:active,
            input[type="button"].alt:active,
            .button.alt:active {
                background-color: #eaeaea;
            }

            input[type="submit"].alt.icon:before,
            input[type="reset"].alt.icon:before,
            input[type="button"].alt.icon:before,
            .button.alt.icon:before {
                color: #aaa;
            }

        input[type="submit"].special,
        input[type="reset"].special,
        input[type="button"].special,
        .button.special {
            background-color: #3dc4c7;
            color: #ffffff !important;
        }

            input[type="submit"].special:hover,
            input[type="reset"].special:hover,
            input[type="button"].special:hover,
            .button.special:hover {
                background-color: #5ed0b1;
            }

            input[type="submit"].special:active,
            input[type="reset"].special:active,
            input[type="button"].special:active,
            .button.special:active {
                background-color: #39c29d;
            }

        input[type="submit"].disabled, input[type="submit"]:disabled,
        input[type="reset"].disabled,
        input[type="reset"]:disabled,
        input[type="button"].disabled,
        input[type="button"]:disabled,
        .button.disabled,
        .button:disabled {
            background-color: #888 !important;
            box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
            color: #fff !important;
            cursor: default;
            opacity: 0.25;
        }

/* Features */

    .features article {
        border-top: solid 3px #f4f4f4;
        margin-bottom: 2.25em;
        padding-top: 2.25em;
    }

        .features article:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .features article .image {
            display: inline-block;
            padding-right: 2.5em;
            vertical-align: middle;
            width: 48%;
        }

            .features article .image img {
                display: block;
                width: 100%;
            }

        .features article .inner {
            display: inline-block;
            vertical-align: middle;
            width: 50%;
        }

            .features article .inner > :last-child {
                margin-bottom: 0;
            }

/* Header */
    #header nav {
        background: #3566eb;        
        color: #ffffff;
        min-height: 4.5em;
        position: relative;        
        text-align: left;
        top: 0;
        width: 100%;
        border-top: red solid 2.5px;
        border-bottom: red solid 2.5px;
    }

        #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
            color: #ffffff;
        }

            #header h1 a, #header h2 a, #header h3 a, #header h4 a, #header h5 a, #header h6 a {
                color: #ffffff;
            }

        #header header p {
            color: #ffffff;
            opacity: 0.5;
        }



            #header a:hover {
                color: #ffffff !important;
                opacity: 1;
                
            }

        #header > header {
            padding: 1em;
        }

            #header > header .avatar {
                display: flex;
                margin: 0 auto 2.25em auto;
                width: 8em;
            }

            #header > header h1 {
                font-size: 1.75em;
                margin: 0;
            }

            #header > header p {
                font-style: italic;
                margin: 1em 0 0 0;
            }

        #header > footer {
            bottom: 0;
            left: 0;
            padding: 2em;
            position: absolute;
            width: 0;
        }

            #header > footer .icons {
                margin: 0;
            }

                #header > footer .icons li a {
                    color: #ffffff;
                    opacity: 0.5;
                }

        .navbar-links {
            list-style: none;
            margin-right: 2em;
            padding: 0;            
            overflow: hidden;
            float: right;                     
        }

            #header > nav ul li {                
                font-size: 1.14em;
                font-family: "Poppins", sans-serif;
                float: left;
                overflow: hidden;
                position: relative;
                display: flex;
            }            

                #header > nav ul li a {
                    -moz-transition: none;
                    -webkit-transition: none;
                    -ms-transition: none;
                    transition: none;
                    border: 0;
                    color: #ffffff !important;
                    text-decoration: none;
                    display: block;
                    overflow: hidden; 
                }


                    #header > nav ul a.active {
                        padding: 1.2em 1.4em 1.8em 1.4em; 
                        background-color: #fff;
                        color: rgb(102, 116, 235) !important;
                        overflow: hidden;
                        border-radius: 2%;
                    }

                    #header > nav ul a.navitems {
                        padding: 1.2em 1.4em 1.1em 1.4em;
                        overflow: hidden;
                        transition: background 250ms ease-out;                  
                    }

                    #header > nav ul a.navitems:hover {                        
                        background-color: rgba(255, 255, 255, 0.438);
                        color: white !important;                        
                        border-radius: 2%;                        
                    }

                #header > nav ul li:first-child {
                    border-top: 0;
                }

    /*Bar menu*/
    .toggle-button {
        position: absolute;        
        top: 1.2em;
        right: 2em;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
    }            
    .toggle-button .bar {
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 5px;
    } 
    



/* Wrapper */

    #wrapper {
        background-color: white;        
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding-bottom: 8em;
        min-height: 100vh;
    }


/* Main */

    #main > section:last-child {
        border-top: solid 3px #a1989f;
        margin-top: 1em;
    }

        #main > section > .container {
            padding: 2em 7em 4em 11em;
        }

        #main > section > .container > p {
            margin-left: 0em;
            margin-right: 8em;
        }

            #main > section > .container > h1 {
                margin-top: 3em;                          
            }

            #main > section > .container > h1 + p {
                margin-bottom: 0em;                          
            }

            #main > section > .container > ul > li{
                margin: 0em 2em 0em 0em;          
            }
        

        #main > section:first-child {
            border-top: 0;
        }


/* Footer */

    #footer { 
        max-height: 7em;       
        font-size: 16pt;
        background: #fafafa;        
        color: #c0c0c0;
        overflow: hidden;
        padding: 1em 0 0em 0;
        width: 100%;
        bottom: 0px;
        position: absolute;
        
    }

        #footer .copyright {
            line-height: 1em;
            list-style: none;
            padding: 0;
        }

            #footer .copyright li {
                border-left: solid 1px #d4d4d4;
                display: inline-block;
                font-size: 0.8em;
                margin-left: 1em;
                padding-left: 1em;
            }

                #footer .copyright li:first-child {
                    border-left: 0;
                    margin-left: 0;
                    padding-left: 0;
                }

                #footer .copyright li a {
                    color: inherit;
                }


/* XLarge */

@media screen and (max-width: 1680px) {

    /* Basic */

    body, input, select, textarea {
        font-size: 15pt;
    }

    #main > section > .container {
        padding: 30px 70px 30px 100px;    
        font-size: 15pt;
        width: 100vw;                        
    }
    
    header h2 + p {
        margin-right: 300px;
    }
    
    .container ul li {
        line-height: 30px;
        padding-bottom: 20px;
    }

    #main > section > .container > p {
        margin-left: 0em;
        margin-right: 0em;
    }    
    
    .image.refleft {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .image.refright {
        margin-left: 10px;
        margin-bottom: 10px;
    }
    
    .copyright {
        font-size: 15pt;
    }
}

/*Toggle Menu breakpoint*/
@media screen and (max-width: 1580px) {
    /*Bar menu*/
    nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;            
    }        

    .toggle-button {
        display: flex;
        top: 29px;
        right: 50px;
    }   

    .navbar-links {
        display: none;
        width: 100%;
        align-items: flex;
        flex-direction: column;
        margin-top: 4em;           
    }

    .navbar-links li {            
        width: 100%;
        padding: 0;
        align-items: center;       
    }

    .navbar-links li a {
        width: 100%;
        text-align: center;
        padding: 0;
        align-items: center;
        font-size: 18;
        font-weight: 550;
    }

    #header > nav ul a.active {
        padding: 1.5em 2em 1.5em 2em;
        background-color: white;
        border-radius: 0;
    }

    .navbar-links.active {
        display: flex;                                 
    }
}

/* Large */

@media screen and (max-width: 1280px) {

    /* Basic */

    body, input, select, textarea {
        font-size: 20pt;
    }

    #main > section > .container {
        padding: 30px 50px 30px 80px;    
        font-size: 20pt;
        width: 100vw;                               
    }

    header li {text-align: justify;}

    header h1 {text-align: justify;}

    h2 {text-align: center;}

    header {text-align: center;}

    header.major h2 + p {
        margin-right: 0;
        text-align: center;
    }
    header p {
        margin-right: 0;        
    }
    
    .toggle-button {
        top: 44px;
        right: 60px;
    }
    
    .copyright {
        font-size: 18pt;
    } 

    /*Images*/
    .jobbra.keret {
        display: none;
    }    
    
    .ref.keret {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .image.refleft {
        width: 700px;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .image.refright {
        width: 700px;
        float: none;
        margin-left: 0;
        margin-right: 0;
    } 
    .image.center {
        width: 700px;
    }
    .image.energetika {
        width: 900px;
    }
      
}


/* Medium */

@media screen and (max-width: 1024px) {

    /* Basic */    

    html, body {
        overflow-x: hidden;        
    }

    body, input, select, textarea {
        font-size: 18pt;
    }    

    #main > section > .container {
        padding: 30px 50px 30px 80px;    
        font-size: 20pt;
        width: 100vw;                               
    }

    .toggle-button {
        top: 39px;
        right: 70px;
    }

    .copyright {
        font-size: 20pt;
    }

    /*images*/
    .image.energetika {
        width: 650px;
    }    
    .image.refleft {
        width: 670px;        
    }
    .image.refright {
        width: 670px;        
    }
    .image.center {
        width: 640px;
    }
    .image.energetika {
        width: 640px;
    }
}


/* Small */

@media screen and (max-width: 736px) {

    /* Basic */

    body, input, select, textarea {
        font-size: 12pt;
    }

    h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
        display: none;
    }

    h2 {
        font-size: 1.75em;
    }

    h3 {
        font-size: 1.5em;
    }

    h4 {
        font-size: 1em;
    }
    
    #main > section > .container {
        padding: 30px 50px 30px 50px;    
        font-size: 14pt;
        width: 100vw;                               
    }

    #main > section > .container ul li{
        padding-bottom: 4px;                               
    }

    .toggle-button {
        top: 24px;
        right: 60px;
    }

    .copyright {
        font-size: 14pt;
    }

    /*images*/
    .image.refleft {
        width: 400px;        
    }
    .image.refright {
        width: 400px;        
    } 

    .image.center {
        width: 400px;
    }
    .image.energetika {
        width: 400px;
    }
    
    
}


/* XSmall */

@media screen and (max-width: 480px) {

    /* Basic */

    html, body {
        min-width: 320px;
    }

    body, input, select, textarea {
        font-size: 6pt;
    }

    #main > section > .container {
        padding: 30px 30px 30px 30px;    
        font-size: 8pt;
        width: 100vw;                                     
    }  
    
    #main > section > .container ul li{
        padding-bottom: 0;
        line-height: 14px;                             
    }

    nav {
        font-size: 10pt;
    }
    .toggle-button {
        top: 18px;
        right: 60px;
    }

    .copyright {
        font-size: 6pt;        
    }

    #footer {
        max-height: 100px;
    }
    
    /*images*/
    .image.center{
        width: 260px;
    }
    .image.energetika {
        width: 260px;
    }
    
    .image.refleft {
        width: 260px;                       
    }
    .image.refright {
        width: 260px;                  
    } 
}