body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #1b1b1b;
    background-color: #b6c7cf;
    font-size: 100%;
    color: #000;
}

* {
    box-sizing: border-box;
}

.bijelo {
    background-color: #fff;
}

#sve {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}

header {
    background-color: #e7e7e9;
    color: #fff;
    padding: 0;
    margin-bottom: 14px;
}

header small span {
    display: none;
}

header small {
    display: block;
    text-align: center;
    background-color: #fb6614;
    padding: 8px 20px;
    color: #000;
}

header small a {
    color: #fff;
    text-decoration: none;
}

a#logo {
    background: transparent url(../slike/vjetar-logo.png) center center no-repeat;
    background-size: 300px;
    text-indent: -9999px;
    width: 100%;
    min-height: 66px;
    float: none;
    margin: 0;
    padding: 0;
    display: block;
}

nav {
    font-family: Courier, "Courier New", monospace;
    margin: 0;
    padding: 0 14px;
}

nav ul {
    font-size: 1em;
    color: #006100;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
}

nav ul li {
    line-height: 1.4em;
    padding-left: 10px;
}

nav ul li a {
    color: #006100;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

nav ul li.menuimglink {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}

nav ul li img {
    width: 92px;
    height: 20px;
}

p {
    line-height: 1.3em;
}

p a, p a:visited {
    color: #006100;
    text-decoration: underline;
}

p a:hover {
    color: #006100;
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-weight: bold;
    margin-bottom: 20px;
}

h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
.prodlist h3 { font-size: 1.0em; }
h4 { font-size: 1.0em; }

    .content {
        padding: 0 14px;
    }

.content ul li {
    list-style: disc;
    margin: 0 0 0.8em 1em;
}

.content ul.ulnb li {
    list-style: none;
    line-height: 0.8em;
}

.rwdimg {
    width: 100%;
    display: block;
    margin: 0;
}

strong {
    font-weight: bold;
}

.hidemobile { display: none; }

.tac { text-align: center; }
.taj { text-align: justify; }
.tal { text-align: left; }
.tar { text-align: right; }
.tajp p { text-align: justify; }

.ml20 { margin-left: 20px;}
.mr20 { margin-right: 20px;}
.mt20 { margin-top: 20px;}
.mb20 { margin-bottom: 20px;}
.mb0 { margin-bottom: 0;}
.mbi20 img { margin-bottom: 20px;}
.mb40 { margin-bottom: 40px;}
.mb040em { margin-bottom: 1em;}
.mbm1em { margin-bottom: 1em;}
.ma { margin: 0 auto; }
p.mobilepadding { padding: 0 20px 20px 20px; }

.plr2 { padding-left: 0; padding-right: 0; }
.pb0 { padding-bottom: 0; }
.w25 { width: 25%;}
.w50 { width: 100%; padding: 0 14px; }
.w100 { width: 100%;}

.db { display: block;}
.dib { display: inline-block;}

.fs085em { font-size: 0.85em; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* _____________________________ POCETNA _________________________________________ */

    #welcome, .homesection {
        padding-left: 14px;
        padding-right: 14px;
    }

    .pocetna3 {
        margin: 1em 0;
    }

    .homesection img, .homefeatures img {
        display: block;
        width: 100%;
    }

    .homefeatures {
        padding: 0 15px;
    }

    .homefeatures h3 {
        font-size: 1.3em;
    }

    .homefeatures h3 a {
        color: #fb6614;
        text-decoration: none;
    }


/* _____________________________ PRODAJA _________________________________________ */

.floatleft {
    float: none;
}

.w50 img {
    width: 100%;
}

.w50 img.securityimg {
    width: auto;
}


.minilogo img {
    width: 200px;
}

.listimages h4 {
    margin-top: 1em;
}

.tac p {
    text-align: justify;
}

.listimages img, .listimages2 img {
    display: block;
    margin-bottom: 0.4em;
    width: 100%;
}

.content ul.listimages2 li {
    list-style: none;
}

.prodlist {
    padding: 0 20px;
}

.prodlist div {
    margin-bottom: 40px;
}

.logos img {
    width: 60%;
    display: block;
    margin: 0 auto;
}

.prodaja h3 a {
    color: #fb6614;
    text-decoration: none;
}

/* _____________________________ KONTAKT _________________________________________ */

#contactform input, #contactform textarea {
    background: #dbe4ff;
    background: #fff;
    border: 1px solid #6e6e6e;
    color: #929292;
    display: block;
    font-weight: 400;
    height: 26px;
    width: 98%;
    letter-spacing: 0;
    padding: 4px 4px 4px 8px;
    transition-duration: 400ms;
    transition-property: border;
    margin-bottom: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

#contactform textarea {
    height: 100px;
    padding: 4px 8px 4px 8px;
    width: 98%;
}

img.securityimg {
    border: 1px solid #6e6e6e;
    margin-right: 9px;
}

#contactform input#security_code {
    width: 120px;
    display: inline;
    color: #000;
    margin-top: -8px;
}

#contactform input#sendbut {
    background: #4183bf;
    color: #fff;
    padding: 8px 9px 28px 9px;
    font-weight: bold;
    width: 104px;
    border: 1px solid #4183bf;
}

#contactform input#sendbut:hover {
    background: #fff;
    color: #4183bf;
    border: 1px solid #4183bf;
    cursor: pointer;
}

.greskakod {
    font-weight: bold;
    background: #C00;
    color: #fff;
    width: 98%;
    padding-left: 8px;
}

/* _____________________________ FOOTER _________________________________________ */

footer {
    clear: both;
    background-color: #006100;
    color: #fff;
    margin-top: 20px;
    font-size: 0.8em;
    padding: 8px 14px;
}


/* ================================================================================== 
                                  TABLETI                                     
================================================================================== */

@media screen and (min-width: 768px) {

    h1 { font-size: 2.2em; }
    h2 { font-size: 2.0em; }
    h3 { font-size: 1.6em; }
    .prodlist h3 { font-size: 1.2em; }
    h4 { font-size: 1.2em; }

    .hidemobile { display: block; }
    .floatleft { float: left;}
    .w50 { width: 50%; padding: 0;}
    .mb040em { margin-bottom: 0.4em;}
    .mbm1em { margin-bottom: 1em;}
    .plr2 { padding-left: 2em; padding-right: 2em; }
    .pl40 { padding-left: 40px;}
    .tac p { text-align: center;}
    .wideblock { display: block; }
    .pl195 { padding-left: 195px;}

    .w50 img { width: 240px; }
    .onama .w50 img { width: auto; }

    header {
        height: 115px;
        border: 0;
        padding: 0;
        margin-bottom: 0;
    }

    header small {
        height: 30px;
        display: block;
        text-align: right;
        background-color: #e57f47;
        background-color: #fb6614;
        /*text-transform: uppercase;*/
        font-size: 0.8em;
        padding: 8px 20px 0 0;
    }

    header small span {
        display: inline-block;
        margin-left: 20px;
    }

    header small strong {
        
    }

    .logonav {
        display: flex;
        justify-content: space-between;
        padding: 20px 0 0 0;
    }

    a#logo {
        background: transparent url(../slike/vjetar-logo.png) 0 0 no-repeat;
        background-size: 100%;
        width: 370px;
        height: 53px;
        margin: 0 30px 0 24px;
    }

    nav {
        margin: 0;
        padding: 0;
    }

    #welcome {
        background: #fff url(../slike/stihl-motorna-pila.jpg) top right no-repeat;
        min-height: 460px;
        position: relative;
        padding: 0;
    }

    #welcome h1 {
        font-size: 1.84em;
        font-weight: bold;
        font-family: "Share Tech Mono", Courier, "Courier New", monospace;
        text-transform: uppercase;
        position: absolute;
        bottom: 20px;
        left: 20px;
    }

    #welcome h1 span {
        background-color: #fff;
        padding: 4px;
    }

    #welcome h1 span.veliki {
        display: block;
        font-size: 1.5em;
    }

    #welcome h1 span.veliki2 {
        font-size: 1.0em;
    }

    .homesection {
        padding: 40px 0 30px 0;
    }

    .homesection section {
        width: 33%;
        padding: 0 8px;
        float: left;
    }

    .homesection h2 {
        margin-bottom: 40px;
    }

    .homesection section h3 {
        text-align: center;
        margin-bottom: 20px;
    }

    .homesection section img {
        display: block;
    }

    .homesection hr {
        height: 2px;
        width: 300px;
        color: black;
        margin-bottom: 20px;
        border-width: 0;
        background-color: black;
    }

    .pocetna3 {
        margin: 0;
        width: 100%;
        display: block;
    }

    .bigmargintop {
        margin-top: 40px;
    }

    .homepadding {
        padding: 0 64px;
    }

    p {
        line-height: 1.3em;
        margin-bottom: 20px;
    }

    .rwdimg {
        width: auto;
    }

    .narancasto {
        color: #fb6614;
    }

    .zeleno {
        color: #00a126;
    }

    .content {
        padding: 40px 64px 0 64px;
    }

    .minilogo {
        margin: 30px 0 40px 0;
    }

    .listimages li, ul.listimages2 li {
        list-style: none;
    }

    .listimages li {
        margin: 1em 1em 0 1em;
        padding: 0;
        width: 240px;
        text-align: center;
        display: inline-block;
    }

    .listimages li h4 {
        text-align: center;
        margin-top: 0;
    }

    .listimages li p {
        text-align: justify;
        font-size: 0.8em;
    }

    .listimages2 {
        padding-top: 2em;
        text-align: center;
    }

    .listimages2 li {
        padding: 0 1em 1em 1em;
        margin: 0;
        width: 22%;
        text-align: center;
        display: inline-block;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
        box-sizing: border-box;
    }

    .listimages2 img {
        max-width: 88%;
        width: auto;
		vertical-align: middle;
    }

    .homefeatures {
        display: flex;
        justify-content: space-around;
        padding: 30px 0 0 0;
    }

    .homefeatures section {
        width: 40%;
        margin: 0;
        padding: 0;
    }

    /* ------------------------------ PRODAJA -------- */

    .prodlist {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .prodlist > div {
        width: 31%;
        overflow: hidden;
        position: relative;
    }

    .prodlist > div img {
        /*width: 44%;
        height: auto;*/
        height: 270px;
        width: auto;
    }

    .prodlist div div {
        position: absolute;
        top: 10px;
        right: 0;
        width: 64%;
    }

    .prodlist h3 {
        background: rgba(255,255,255,1);
        margin: 0 0 10px 0;
        padding: 5px 10px;
        text-align: left;
    }

    .prodlist p {
        background: rgba(255,255,255,0.84);
        padding: 10px;
        text-align: left;
    }

    /* ------------------------------ GALERIJA -------- */

    .galerija img {
        margin: 11px;
    }

    /* ------------------------------ KONTAKT -------- */

    #contactform { margin-left: 90px;}

    #contactform input, #contactform textarea {
        width: 80%;
    }

    #contactform textarea {
        height: 114px;
    }

    img.securityimg {
        margin-bottom: -8px;
    }

    /* ------------------------------ FOOTER -------- */

    footer {
        padding: 20px 64px;
    }

}

/* ================================================================================== 
                                  VELIKI EKRANI                                     
================================================================================== */

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

    header {
        padding: 0 0 15px 0;
        height:  auto;
    }

    .logonav {
        padding: 15px 0 0 0;
        align-items: center;
    }

    a#logo {
        background-size: 100%;
        width: 480px;
        height: 66px;
        margin: 0 30px 0 24px;
    }

    nav {
        margin: 0;
        padding: 0 24px 0 0;
    }

    .homesection section {
        width: 33%;
        padding: 0 24px;
        float: left;
    }

    .homesection img.floatleft {
        display: inline-block;
        width: auto;
    }

    .homefeatures {
        justify-content: left;
    }

    .homefeatures section {
        width: 35%;
        margin: 0;
        padding: 0 0 0 64px;
    }

    .flexsideimages {
        display: flex;
        align-items: flex-start;
    }

    .onama .w50.flexsideimages img {
        width: 48%;
        height: auto;
    }

    .onama .w50.flexsideimages img:first-child {
        margin-right: 4%;
    }

    /* ------------------------------ PRODAJA -------- */

    .prodlist > div {
        margin-bottom: 40px;
    }
}