.borderRadius(@r) {
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    border-radius: @r;
}

.transition (@time) {
    -webkit-transition: @time ease-in-out;
    -moz-transition: @time ease-in-out;
    -o-transition: @time ease-in-out;
    transition: @time ease-in-out;
}

.backgroundPosition(@x: 1, @y: 0) {
    background-repeat:  no-repeat;
    background-position:  (-150px * @x) (-30px - @y);
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

body, html, h1, h2, h3, h4, h5, h6, span, div, p, label, * {
    color: #61615F;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
}

a {
    color: #BD1B05;
    outline: 0;
    &:hover {
        color: #000;    
    }
}

#cookie-div {
    background-color: #BD1B05;
    border-bottom: 1px solid #BD1B05;
    color: #fff !important;
    font-size: 15px;
}

#layout {
    background-color: #FFF;
    margin-top: 90px;
    position: relative;
    #logotyp {
        display: block;
        left: -50px;
        top: -85px;
        position: absolute;
        z-index: 100;
    }

    .navbar {
        .borderRadius(0px);
        border: 0;
        box-shadow: none;
        .nav {
            li {
                float: left;
                //display:  !important;
                padding: 15px 0px;
                width: auto;
                a {
                    text-transform: uppercase;
                }
            }
        }
    }

}

#wyszukiwarka {
    padding: 0px;
    float: right;
    /* AUTOCOMPLETE */
    #form-search {
        .twitter-typeahead {
            .borderRadius(14px 0px 0px 0px);
        }
        button {
            background-color: #BD1B05;
            background-image: none;
            border: 0;
            color: #333;
            height: 50px;
            margin-left: -4px;
            width: 50px;
            .borderRadius(0px);
            span {
                color: #FFF;
            }
        }

        .typeahead,
        .tt-query,
        .tt-hint {
            width: 500px;
            height: 50px;
            padding: 0px 12px;
            font-size: 14px;
            border: 2px solid #BD1B05;
            border-top: 0;
            border-right: 0;
            outline: none;
            .borderRadius(0px);
        }

        .typeahead:focus {
            border: 2px solid yellow;
        }

        .tt-query {
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        }

        .tt-hint {
            background-color: #F7F7F7;
            color: #999;
        }

        .tt-dropdown-menu {
            width: 500px;
            margin-top: 2px;
            padding: 8px 0;
            background-color: #F7F7F7;
            border: 2px solid #000;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            box-shadow: 0 5px 10px rgba(0,0,0,.2);
        }

        .tt-suggestion {
            padding: 5px 10px;
            font-size: 14px;
            line-height: 24px;
            text-align: left;
        }

        .tt-suggestion.tt-is-under-cursor {
            color: #fff;
            background-color: #BD1B05;
            &:hover {
                p {
                    color: #FFF;
                }
            }
        }

        .tt-suggestion p {
            margin: 0;
            &:hover {
                color: #FFF;
            }
        }

        .gist {
            font-size: 14px;
        }
    }
}

#main-menu {
    background: #FFF url('../images/kropki.png') bottom center repeat-x;
    margin: 0px;
    padding: 0px;
    padding-left: 255px;
    position: relative;
    width: 100%;
    a {
        background-color: transparent;
        color: #000;
        font-size: 18px;
        font-weight: 300;
        padding: 25px 12px;
        text-shadow: none;
        .transition(0.5s);
        &:visited {
            color: #000;
        }
        &:hover, &:active {
            color: #BD1B05;
            text-decoration: underline;
        }
    }
}

#bannery {
    //height: 300px;
    #carousel-bannery {
        margin-left: 20px;
        margin-bottom: 22px;
        width: 700px;
        .left {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0px, rgba(255, 255, 255, 0) 100%)
        }
        .right {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.7) 100%)
        }
    }

}

#prod-menu {
    background: #BD1B05;
    margin: 0px;
    li {        
        margin: 0px 5px;
        a {
            color: #FFF;
            font-size: 18px;
            font-weight: 300;
            text-shadow: none;
            margin: 0px;
            padding: 22px 18px;
            .transition(0.2s);
            &:link, &:visited {
                color: #FFF;
            }
            &:hover {
                text-decoration: underline;
            }
            &:active {
            }
        }
    }
}
#content {
    padding-top: 30px;
}
#brands {
    background-color: #3e3d42;
    padding: 30px 0px 10px 0px;
    ul {
        height:65px;
        overflow: hidden;
        li{
            display: block;
            float: left;
            height: 65px;
            list-style: none;
            margin: 0;
            text-align: center;
            overflow: hidden;
            a {
                background-image: url(../images/loga.png);
                cursor: pointer;
                display: block;
                float: left;
                height: 65px;
                margin: 0px 24px;
                text-indent: -9999px;
                .transition(0.4s);
                opacity: 0.7;
                filter: alpha(opacity=70); /* For IE8 and earlier */
                &:hover {
                    opacity: 1;
                    filter: alpha(opacity=100); /* For IE8 and earlier */
                }
                &.harvest {
                    .backgroundPosition(0,0);
                    width: 98px;
                }
                &.printer {
                    .backgroundPosition(1,0);
                    width: 95px;
                }
                &.sagaform {
                    .backgroundPosition(2,0);
                    width: 75px;
                }
                &.grizzly {
                    .backgroundPosition(3,0);
                    width: 125px;                    
                }
                &.projob {
                    .backgroundPosition(4,0);
                    width: 55px;	
                }
                &.dad {
                    .backgroundPosition(5,0);
                    width: 135px;
                }
                &.sea {
                    .backgroundPosition(6,0);
                    width: 155px;	
                }
            }
        }
    }
}

#footer {
    color: #000;
    padding: 30px 0px 20px 0px;
    * {
    }
    a {
        color: red;
        text-decoration: none;
        &:hover {
            border-bottom-style: solid;
            border-bottom-width: 1px;
            color: #000;
        }
    }
    ul.menu {
        li {
            list-style: none;
            a {
                display: block;
                float: left;
                font-size: 18px;
                margin: 20px;
                text-transform: uppercase;
                color: red;
                font-variant: full-width;
                &:hover {
                    border: 0;
                    color: #000;
                    text-decoration: none;
                }
                span {
                    font-size: 12px;
                }
            }
        }
    }
}

/* Large desktop */
@media (min-width: 1200px) {
}

/* Large desktop */
@media (max-width: 1200px) {
    #layout {
        margin-top: 0px;
        div#logotyp {
            position: inherit;
        }
        #main-menu {
            padding: 0px;
            li {
                a {
                    font-size: 18px;
                    padding-left: 15px;
                    padding-right: 10px;
                }
            }
        }
        #prod-menu {
            padding: 0px;
            li {
                a {
                    font-size: 16px;
                    padding-left: 15px;
                    padding-right: 5px;
                }
            }
        }
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    #layout {
        div#logotyp {
            position: inherit;
        }
        #main-menu {
            padding: 0px;
            li {
                a {
                    font-size: 16px;
                    padding-left: 10px;
                    padding-right: 5px;
                }
            }
        }
        #prod-menu {
            padding: 0px;
            li {
                a {
                    font-size: 14px;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
        }
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}

/* Landscape phones and down */
/* Pojawia sie gorne menu */
@media (max-width: 590px) {
    #layout {
        .nav-toggle {
            display: block;
            a {

            }
        }
        .navbar {    
            .navbar-nav {
                ul {
                    li {
                        display: block;
                        float: none;
                        padding: 5px;
                        a {
                            font-size: 12px;
                            padding: 5px 5px 5px 20px;
                        }
                    }
                }
            }
        }
    }
}