body {
    background-color: #ebebeb;
    font-family: 'Open Sans', sans-serif;
    overflow: auto !important; /*go dodadov za da od link vo ist modal se povika pak so open function (lens), no posle dispose, scrollot ne rabotese*/
}
html {
    font-size: 14px;
    margin:0;
}
.containerMoj {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}
.zaSite {
    margin: auto;
    max-width: 1350px;
    background-color: #ebebeb;
}
.zaSiteMeni {
    margin: auto;
    max-width: 1450px;
}
html {
    position: relative;
    min-height: 100%;
}

a {
    cursor: pointer;
}
.btn-meni-shadow {
    box-shadow: 2px 2px 1px #BBB;
    border: 1px solid #999;
}

.btn-default-shadow {
    box-shadow: 7px 7px 5px grey;
    border: 1px solid #CCC;
}

.btn-info-shadow {
    box-shadow: 5px 5px 3px #5bc0de;
    border: 1px solid #CCC;
}
.strelkaPrikazi {
    appearance: auto !important; /* // za da pojavi strelka desno za dropdown lista, vo formite za editiranje-modalnite*/
}
#create-form select, #searchForm select {
    appearance: auto !important; /* // za da pojavi strelka desno za dropdown lista, vo formite za editiranje-modalnite*/
}

/*za da ne gi zaokruzuva kosinjata na pravoagolnicite*/
/** {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
*/
/* xs < 768 */
@media screen and (max-width: 767px) {
    body {
        font-size: 0.8em;
    }
    .kos-containerVnatresen {
        height: 350px;
    }
/*    .kos-containerVnatresenList {
        height: 400px;
    }*/

}

/* sm */
@media screen and (min-width: 768px) {
    body {
        font-size: 0.8em;
    }
    .kos-containerVnatresen {
        height: 375px;
    }
/*    .kos-containerVnatresenList {
        height: 450px;
    }*/

}

/* md */
@media screen and (min-width: 992px) {
    body {
        font-size: 0.85em;
    }
    .kos-containerVnatresen {
        height: 400px;
    }
/*    .kos-containerVnatresenList {
        height: 500px;
    }*/
}

/* lg */
@media screen and (min-width: 1200px) {
    body {
        font-size: 0.9em;
    }
    .kos-containerVnatresen {
        height: 430px;
    }
/*    .kos-containerVnatresenList {
        height: 400px;
    }*/
}

.footerMoj {
    /*margin-top:30px;*/
}
.footerInfo {
    background: #333;
    padding: 2em;
    color: white;
}
.footerNajdole {
    background: #111;
    padding: 3em;
}
.footerInfoNaslov {
    color: yellow;
    font-size: 1.3em;
    padding: 13px;
    border-top: solid 1px grey;
    border-bottom: solid 1px grey;
}
.footerInfoPodNaslov {
    color: papayawhip;
    font-size: 1.2em;
    padding:10px;
}
.footerInfoTekst {
    color: wheat;
    font-size: 1.0em;
    padding-bottom:6px;
}
.footerInfoTekstPadding {
    padding:3px;
}

/*.footer p {
    margin: 0;
    font-size: 1.3em;
    color: #848383;
    padding: 1.5em 0em 0 0;
}
*/
/* Za strelkata najdole za da se vrati najgore */
#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 100px;
    right: 10px;
    overflow: hidden;
    width: 53px;
    height: 48px;
    border: none;
    text-indent: 100%;
    background: url('/content/images/up.png') no-repeat 0px 0px;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #ffd230; /*pozadina za glavnoto meni*/
    overflow: hidden;
    text-transform: uppercase; /* za golemi bukvi - go dodadov*/
    box-shadow: 0px 5px 5px 0px #00241a6b;
}

    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        color: #00241a; /*fontot boja za glavnoto meni*/
        text-align: center;
        padding: 10px 36px; /* rastojanie levo desno zgolemiv - go promeniv*/
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        font-stretch: ultra-expanded;
        border-right: 1px solid #aaa; /*megju linkovite border - go dodadov*/
    }

/* Add an active class to highlight the current page */
.active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown container - needed to position the dropdownW3 content */
.dropdownW3 {
    float: left;
    overflow: hidden;
}

    /* Style the dropdownW3 button to fit inside the topnav */
    .dropdownW3 .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: #00241a; /* boja za dropdown tekstot - go promeniv*/
        padding: 10px 36px; /* rastojanie levo desno zgolemiv - go promeniv*/
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        text-transform: uppercase; /* za golemi bukvi - go dodadov*/
        border-right: 1px solid #aaa; /*megju linkovite border - go dodadov*/
    }

/* Style the dropdownW3 content (hidden by default) */
.dropdownW3-content {
    display: none; /*none - treba da bide, samo privremeno*/
    position: absolute;
    background-color: black; /* boja za pozadinata cela - go promeniv*/
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2; /* bese 1 - go promeniv*/
    border: 1px solid #ddd; /* okvir za pozadinata cela - go dodadov*/
}

    /* Style the links inside the dropdownW3 */
    .dropdownW3-content a {
        float: none;
        color: aliceblue; /* boja za linkovite - go promeniv*/
        padding: 1px 16px; /* go promeniv*/
        text-decoration: none;
        display: block;
        text-align: left;
        text-transform: initial; /* za original bukvi - go dodadov*/
        border:none;

    }
    /* Jas ja dodadov klasava dropdownW3 KatGlavna */
    .dropdownW3-content .KatGlavna {
        float: none;
        color: orange; /* boja za linkovite - go promeniv*/
        padding: 12px 16px; /* go promeniv*/
        text-decoration: none;
        display: block;
        text-align: left;
        font-size: 1.5em;
    }
/* Add a dark background on topnav links and the dropdownW3 button on hover */
.topnav a:hover, .dropdownW3:hover .dropbtn {
    /*background-color: green;*/ /* go promeniv za da nema cela pozadina boja*/
    color: orangered; /* boja za glavnite linkovi on hover - go promeniv*/
}

/* Add a grey background to dropdownW3 links on hover */
.dropdownW3-content a:hover {
    /*background-color: #ddd;*/
    color: yellow; /* boja za linkovite on hover - go promeniv*/
}

/* Show the dropdownW3 menu when the user moves the mouse over the dropdownW3 button */
.dropdownW3:hover .dropdownW3-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdownW3 .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdownW3 {
            float: none;
        }

        .topnav.responsive .dropdownW3-content {
            position: relative;
        }

        .topnav.responsive .dropdownW3 .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}

/*kraj topNav od w3school*/
/*parallax od w3school*/
.parallax {

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax1 {
    /* The image used */
    background-image: url('../fajlovi/Anima.gif');
/*    height:auto;
    max-width:100%;*/
  /*  height: 100%;*/
    min-height: 500px;
}
.parallax2 {
    /* The image used */
    background-image: url('../fajlovi/debarmoj.png');
    /* Set a specific height */
    min-height: 600px;
}
.parallax3 {
    /* The image used */
    background-image: url('../fajlovi/naslovna.jpg');
    /* Set a specific height */
    min-height: 500px;
}
/*fixenHeader vo meni pri scroll od w3school*/
.headerMoj {
    position: sticky;
    top: 0;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* za da bide iznad vidlivo - go dodadov*/
}
/* za da bide krie na artiklot containerot, no na hover da prikaze*/
.prekuSlika {
    background-color: rgba(225,171,19,0.65);
    border: 1px solid rgba(30,30,124,0.65);
    font-size:x-large;
}
.prekuSlikaPoraka {
    background-color: rgba(100,100,100,0.65);
    border: 1px solid rgba(30,30,124,0.65);
    font-size: large;
}
/* za da bide krie na artiklot containerot, no na hover da prikaze*/
@media screen and (max-width: 600px) {
    .sokri {
        visibility: visible; /*hidden*/
        opacity: 1; /* 0 */
     
    }
}
@media screen and (min-width: 601px) {
    .sokri {
        visibility: hidden; /*hidden*/
        opacity: 0; /* 0 */
        transition: visibility 3.3s linear,opacity 0.7s linear;
    }}

.kockata:hover .sokri {
    visibility: visible;
    opacity: 1;
}
.redZaKos {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-right: 11px;
    margin: auto;
    text-align: center;
}

.kos-containerVnatresen {
    border: 1px solid grey;
    padding:5px;
    margin: 10px 0px;
    position: relative;
    overflow: hidden;
    background-color: azure;
}

.slika-container {
    padding-right:8px;
    padding-left:3px;
    position: absolute;
    top:10px;
    height: 70%;
    overflow: hidden;
}
.tekst-container {
    position: absolute;
    bottom: 10px;
    overflow: hidden;
    width:100%;
    text-align:center;
}

.imageSale {
    position: absolute;
    right: 0px;
    top: 0px;
    max-height: 100px;
}
.slika-containerList {
    padding-right: 8px;
    padding-left: 3px;
    max-width:200px;
    margin: auto;
    overflow: hidden;
}
.kos-containerVnatresenList {
    border: 1px solid grey;
    padding: 5px;
    margin: 10px 0px;
    position: relative;
    overflow: hidden;
    background-color: azure;
}
.imageSaleList {
    position: absolute;
    left: 0px;
    top: 0px;
    max-height: 100px;
}
.tekst-containerList {
/*    position: absolute;
    bottom: 10px;
    overflow: hidden;
*/    width: 100%;
    /*text-align: center;*/
}






/*  ZA SLAJDEROT ZA FILTER PO CENI ---- POCETOK */
/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

.range-slider {
    position: relative;
    width: 100%;
    height: 35px;
    text-align: center;
}

    .range-slider input {
        pointer-events: none;
        position: absolute;
        overflow: hidden;
        left: 0;
        top: 15px;
        width: 100%;
        outline: none;
        height: 18px;
        margin: 0;
        padding: 0;
        z-index:1;
    }

        .range-slider input::-webkit-slider-thumb {
            pointer-events: all;
            position: relative;
            z-index: 1;
            outline: 0;
        }

        .range-slider input::-moz-range-thumb {
            pointer-events: all;
            position: relative;
            z-index: 10;
            -moz-appearance: none;
            width: 9px;
        }

        .range-slider input::-moz-range-track {
            position: relative;
            z-index: -1;
            background-color: rgba(0, 0, 0, 1);
            border: 0;
        }

        .range-slider input:last-of-type::-moz-range-track {
            -moz-appearance: none;
            background: none transparent;
            border: 0;
        }

        .range-slider input[type=range]::-moz-focus-outer {
            border: 0;
        }

.rangeValue {
    width: 30px;
}

.output {
    position: absolute;
    border: 1px solid #999;
    width: 40px;
    height: 30px;
    text-align: center;
    /*color: red;*/
    border-radius: 4px;
    display: inline-block;
    font: bold 15px/30px Helvetica, Arial;
    bottom: 75%;
    left: 50%;
    transform: translate(-50%, 0);
}

    .output.outputTwo {
        left: 100%;
    }

.containerSlider {
    position: relative;
/*    margin-top: 20px;
    margin-left: -8px;*/
            top: 50%;
        left: 0%;
 /*        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);*/
}

input[type=range] {
    -webkit-appearance: none;
    background: none;
}

    input[type=range]::-webkit-slider-runnable-track {
        height: 5px;
        border: none;
        border-radius: 3px;
        background: transparent;
    }

    input[type=range]::-ms-track {
        height: 5px;
        background: transparent;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-moz-range-track {
        height: 5px;
        background: transparent;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #555;
        margin-top: -5px;
        position: relative;
        z-index: 10000;
    }

    input[type=range]::-ms-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #555;
        margin-top: -5px;
        position: relative;
        z-index: 10000;
    }

    input[type=range]::-moz-range-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #555;
        margin-top: -5px;
        position: relative;
        z-index: 10000;
    }

    input[type=range]:focus {
        outline: none;
    }

.full-range,
.incl-range {
    width: 100%;
    height: 5px;
    left: 0;
    top: 21px;
    position: absolute;
    background: #DDD;
}

.incl-range {
    background: gold;
}
/*  ZA SLAJDEROT ZA FILTER PO CENI ----- KRAJ */

a:link#kategorizacija, a:visited#kategorizacija {
    /*background-color: #f44336;*/
    color: yellow;
    text-decoration: none;
}

a:hover#kategorizacija, a:active#kategorizacija {
    color: white;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lefted {
    position: absolute;
    top: 50%;
    left: 0%;
    /*transform: translate(-50%, -50%);*/
}
.containerSlikaSoText {
    position: relative;
    text-align: center;
    color: white;
}
.bgclass {
    background: linear-gradient(to left, rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,1)), url('/Fajlovi/formular169.jpg');
    background-size: cover;
}

.centerVH {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 500px;*/
    /*border: 3px solid yellow;*/
}