/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html { color: #222; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/*
 * A better looking default horizontal rule
 */

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */

fieldset { border: 0; margin: 0; padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */

textarea { resize: vertical; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/** Homepage **/

body { background-repeat: no-repeat; background-position: center top; background-color: #1a1a18; }

.lang{ color:#1a1a18; position:absolute; right:20px; top:5px; }
.lang a { color:#1a1a18; text-decoration:none; font-size:14px; }
.lang a:hover { color:#e3000f; }

.wrap { width: 100%; }

.logo a { display: block; background-image: url(bg/logo.png); width: 135px; height: 76px; margin-top: 15px; }

.nav { background-color: #f6f6f6; height: 107px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); z-index: 100; position: relative; position: fixed; }

.menu { text-align: right; position:absolute; right:0; top:30px; }

.menu ul { list-style: none; margin: 0; }

.menu ul li { display: inline-block; height: 77px; line-height: 77px; }
.menu ul li a { color: #1a1a18; font-size: 16px; text-decoration: none; padding: 0 10px 0 10px; font-family: 'Open Sans', sans-serif; }

.menu ul li a:hover { color: #e3000f; }

.homepage-banner-wrap { width: 100%; }

.homepage-banner-wrap ul { list-style: none; }

.homepage-banner-wrap ul li { margin-top: -15px; display: inline-block; }

.slick-dots { position: absolute; bottom: 0; width: 100%; text-align: center; padding-left: 0; }

.homepage-banner-wrap ul li button { border: none; background-color: #ffffff; color: #ffffff; outline: none; display: inline-block; float: left; margin-left: 3px; width: 15px; height: 15px; text-indent: -99999em; }

.homepage-banner-wrap ul li button:hover, .homepage-banner-wrap ul .slick-active button { background-color: #e3000f; color: #e3000f; }

.banner-inner-wrap { width: 1150px; margin-left: auto; margin-right: auto; padding-top: 120px; position: relative; }

.homepage-banner { background-position: center center; background-size: cover; background-repeat: no-repeat; height: 660px; width: 100%; position: relative; }

.banner-background { width: 100%; height: 660px; }

.banner-title { position: absolute; left: 0; background-color: #e3000f; padding: 10px 40px; top: 240px; font-family: 'Open Sans', sans-serif; font-size: 39px; font-weight: normal; max-width: 335px; }

.banner-image { float: right; height: 475px; width: 735px; }

h1 { font-family: 'Open Sans', sans-serif; font-size: 39px; font-weight: normal; margin: 0; padding: 10px 0 10px 0; }

.banner-text { color: #252525; float: left; width: 355px; padding-top: 210px; font-size: 12px; font-weight: 300; }

p { font-family: 'Open Sans', sans-serif; font-size: 14px; }

.banner-text p { text-shadow: 1px 2px 2px rgba(0, 0, 0, 1); color: #b3b3b3; }

.banner-text .read-more { display: block; float: left; text-align: center; text-decoration: none; height: 50px; width: 196px; border: 2px solid #e3000f; background: transparent; color: #ffffff; font: bold 14px/50px 'Open Sans', sans-serif; margin-top: 55px; }

.section-title { width: 100%; background-color: #f6f6f6; height: 175px; }

.section-title .section-title-txt { font: 600 45px 'Open Sans', sans-serif; color: #c5c6c6; border-bottom: 2px solid #ea2633; line-height: 165px !important; padding-bottom: 10px; }

.about-us-wrap { height: 600px; background-color: #1a1a18; }

.about-us-gallery { margin-left: auto; margin-right: auto; }

.about-us-txt { padding-top: 55px; color: #f6f6f6; height: 475px; overflow-y: scroll; }

::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #c5c6c6; }

::-webkit-scrollbar { max-height: 100px; width: 10px; background-color: #e3000f; }

::-webkit-scrollbar-thumb { background-color: #e3000f; }

.about-us-txt .title { color: #e3000f; font: 39px 'Open Sans', sans-serif; }

.about-us-txt span { font: 300 13px 'Open Sans', sans-serif; }

.about-us-txt p { margin-right: 60px; font: 13px 'Open Sans', sans-serif; }

.about-us-images img { height: 600px; }

#gallery-overlay { background-color: rgba(0, 0, 0, 0.8); height: 70px; overflow: hidden; position: relative; bottom: 70px; margin-bottom: -70px; }
#gallery-overlay.bottomleft { position: absolute; bottom: 0; left: 10px; margin-bottom: 0; }

.partners-images { height: 520px; display: table-cell; width: 100%; vertical-align: middle; overflow: hidden; }

.reference-table { width: 100%; position:relative; top:50px; }
.reference-table td { padding: 10px; border: 1px solid #acacac; }
.reference-table tr:first-child td { border-top: 0; }
.reference-table tr:last-child td { border-bottom: 0; }
.reference-table tr td:first-child,
table tr th:first-child { border-left: 0; }
.reference-table tr td:last-child,
.reference-table tr th:last-child { border-right: 0; }

.reference { float: left; padding: 0 20px; height: 100%; background-color: #1a1a18; font: 600 13px 'Open Sans', sans-serif; color: #ffffff; text-decoration: none; text-align: center; line-height: 70px; margin-right: 1px; text-transform: uppercase; }

.refs { display: none; min-height: 520px; padding-bottom: 80px; position: relative; }
.refs:first-child { display: block; padding-bottom: 0; }

.paddingtop { height:107px; width:100%; clear:left; }

.slick-prev, .slick-next { position: absolute; right: 71px; height: 70px; width: 70px; text-indent: -999999px; background-color: #1a1a18; background-image: url(bg/sprites.png); background-position: -180px -87px; background-repeat: no-repeat; border: none; cursor: pointer; outline: none; }

.slick-next { background-position: -257px -89px; right: 0; }

.slick-prev:hover { background-position: -16px -87px; }

.slick-next:hover { background-position: -94px -84px; }

.partners { padding-top: 267px; }

.equipment-item { height: 250px; cursor: pointer; }

.equipment-img { width: 60%; height: 250px; -webkit-filter: grayscale(100%); filter: grayscale(100%); position: relative; background-size:cover; background-repeat:no-repeat; background-position:center center; }

.item-text { height: 250px; width: 40%; display: block; background-color: #1a1a18; position: relative; text-transform:uppercase; }

.item-text span { font: bold 40px 'Open Sans', sans-serif; color: #ffffff; margin-left: 70px; display: block; top: 80px; position: relative; }

.equipment-item:hover .item-text span { color: #e3000f; }

.equipment-item:hover .equipment-img { -webkit-filter: none; filter: none; }

.left { float: left; }

.right { float: right; }

.services-wrap { width: 100%; height: 450px; background-image: url('/images/img11.jpg'); padding-top: 115px; }

.services { height: 460px; }

.services-item { width: 100%; height: 350px; }

.services-item img { width: 100%; height: 100%; }

.services-container { width: 100%; height: 350px; background: red; }

.service-image { width: 50%; height: 100px; padding-top: 250px; background-image: url('/images/img16.jpg'); background-repeat: no-repeat; background-size: cover; }

.service-overlay { width: 100%; height: 100px; background-color: #000000; opacity: 0.85; }

.service-overlay span { font: bold 29px 'Open Sans', sans-serif; color: #ffffff; display: block; margin-left: 115px; line-height: 100px; }

.service-description { width: 50%; height: 350px; background-image: url('/images/img17.jpg'); background-repeat: no-repeat; background-size: cover; }

.service-description-overlay { height: 270px; width: 100%; background-color: #000000; opacity: 0.85; padding-top: 80px; }

.service-description-overlay h1 { font: bold 29px 'Open Sans', sans-serif; color: #ffffff; width: 460px; margin-left: 80px; }

.service-description-overlay p { font: 300 13px 'Open Sans', sans-serif; color: #ffffff; width: 490px; margin-left: 80px; }

.service-description-overlay a { text-decoration: none; }

.item-overlay { width: 100%; height: 65px; position: absolute; background-color: #000000; bottom: 0; opacity: 0.85; line-height: 65px; }

.item-overlay span { font: bold 24px 'Open Sans', sans-serif; color: #ffffff; margin-left: 20px; }

.services-item:hover .item-overlay { height: 100%; line-height: normal; }

.services-item:hover .item-overlay span { font: bold 24px 'Open Sans', sans-serif; color: #ffffff; margin-left: 20px; margin-top: 100px; display: block; }

.item-overlay p { margin: 70px 20px 0 20px; color: #ffffff; font: 300 13px 'Open Sans', sans-serif; display: none; }

.services-item:hover .item-overlay p { display: block; }

.item-overlay a { color: #e3000f; text-decoration: none; }

.gallery-item { width: 20%; float: left; }
.gallery-item img { width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); }

.gallery-item img:hover { -webkit-filter: none; filter: none; }

.gallery ul { list-style: none; text-align: center; font: bold 20px 'Open Sans', sans-serif; }

.gallery ul li { display: inline-block; }

.gallery ul li button { background: none; border: none; font-weight: 700; font-style: italic; font-size: 15px; color: #ffffff; cursor: pointer; }

.gallery ul li button:hover { color: #e3000f; }

.contact p, .contact span { font-family: 'Open Sans', sans-serif; font-size: 14px; padding-top: 30px; }

.fairs-wrap,
.sajmovi-fairs-wrap { height: 230px; width: 100%; background-image: url(/images/img12.jpg); background-size: cover; }

.fairs { padding-top: 50px; }

.fairs-item { height: 280px; background-color: #161615; margin-top: 30px; }

.fair-text { width: 50%; }

.fair-text .fair-title { font: bold 19px 'Open Sans', sans-serif; color: #ffffff; margin-left: 15px; display: block; margin-top: 20px; }

.fair-text p { font: 300 13px 'Open Sans', sans-serif; margin-left: 15px; margin-right: 15px; color: #ffffff; }

.fair-date { height: 60px; text-align: center; }

.fair-date span { font: bold 34px 'Open Sans', sans-serif; color: #ffffff; line-height: 60px; }

.fairs-item img { width: 50%; height: 100%; float: right; }

.fairs-tab { height: 75px; background-color: #1a1a18; margin-top: 30px; cursor: pointer; text-align: center; text-decoration:none; }

.fairs-tab span { font: 800 19px 'Open Sans', sans-serif; color: #ffffff; line-height: 75px; }

.fairs-tab:hover { background-color: #1a8648; text-decoration:none; }

.font-red { color: #e3000f; }

.red { background-color: #e3000f; }

.green { background-color: #1a8648; }

.font-green { color: #1a8648; }


.toBold { font-weight: bold; }

.form-map { height: 540px; width: 100%; background-color: #c5c6c6; }

.contact-form { margin-top: 80px; }

.form-input-wrap,
.form-textarea-wrap { width: 390px; height: 45px; background-color: #ffffff; margin-bottom: 10px; border-radius: 3px; background-image: url('bg/sprites.png'); background-repeat: no-repeat; }

.form-textarea-wrap { height: 130px; }

.form-input-wrap input,
.form-textarea-wrap textarea { margin: 0; padding: 0; border-radius: 3px; border: none; float: right; width: 340px; height: 45px; padding-left: 10px; line-height: 45px; border-left: 1px solid #dcdcdc; background-color: #ffffff; outline: none; }

.focused { box-shadow: 2px 3px 5px 0px rgba(0, 0, 0, 0.1); }

.form-textarea-wrap textarea { line-height: 20px; height: 105px; padding-top: 20px; padding-bottom: 5px; resize: none; }

::-webkit-input-placeholder { /* WebKit browsers */ color: #b0b0b0; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #b0b0b0; opacity: 1; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #b0b0b0; opacity: 1; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #b0b0b0; }

#map-canvas { width: 100%; height: 540px; }

.footer { width: 100%; height: 60px; background-color: #110f10; }

.footer p { font: 14px 'Open Sans', sans-serif; color: #ffffff; line-height: 32px; }

#send-button { display: block; line-height: 40px !important; color: #ffffff; background-color: #1a1a18; border: none; cursor: pointer; position: absolute; top: 405px; right: 0; font: bold 14px 'Open Sans', sans-serif; padding: 0px 30px 0px 20px; margin-right: 65px; }

#button-ico { background-image: url('bg/sprites.png'); background-position: -376px -116px; height: 12px; width: 12px; float: left; margin-right: 10px; margin-top: 16px; }

.name-icon { background-position: -407px -7px; }

.email-icon { background-position: -344px -7px; }

.phone-icon { background-position: -291px -7px; }

.text-icon { background-position: -458px -7px; }

/** Homepage - end **/

/** Projektiranje - start **/

.projektiranje-banner,
.sajmovi-banner,
.vitrine-banner { width: 100%; height: 340px; background-image: url(/images/img1.jpg); background-position: center; background-repeat: no-repeat; padding-top: 110px; }

.text { padding-top: 60px; }

.text p { font: 300 13px 'Open Sans', sans-serif; color: #ffffff; }

.text ul { font: 300 13px 'Open Sans', sans-serif; color: #ffffff; list-style: none; margin-bottom: 125px; }

.text ul li:before { content: "-"; position: relative; left: -5px; }
.text ul li { text-indent: -5px; }

.main-images img { width: 100%; height: 470px; }

.image-picker { margin-left: 2px; }

.image-picker img { width: 141px; height: 141px; margin-top: 2px; margin-left: -2px; }

.projektiranje-gallery-wrap { margin-bottom: 55px; }

/** Projektiranje - end **/

/** Sajmovi - start **/

.sajmovi-banner { background-image: url(/images/img13.jpg); }

.line { height: 1px; width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: -25px; }

.sajmovi-fairs-wrap { background: none; margin-bottom: 255px; padding-top: 0; }

.sajmovi-gallery-wrap { margin-bottom: 55px; }

.fairs-title h1,
.vitrine-title h1 { font: 600 44px 'Open Sans', sans-serif; color: #ffffff; margin-top: 40px; }

.title-date { font: 600 29px 'Open Sans', sans-serif; }

/** Sajmovi - end **/

/** Vitrine - start **/

.vitrine-tabs { width: 100%; background-color:#110f10; float:left; }

.vitrine-tab { padding:0 20px; float:left; height: 90px; text-align: center; cursor: pointer; color: #ffffff; }

.vitrine-tab span, .vitrine-tab a { font: bold 19px 'Open Sans', sans-serif; line-height: 90px; color:#fff; text-decoration:none; }

.vitrine-tab a:hover { color: #e3000f; text-decoration:none; }

.product-table-wrap { width: 100%; background-color: #000000; padding-top: 40px; padding-bottom:40px; }
.product-table { width:1120px; margin:0 auto; }
.product-table tr { background:url(bg/tablered.png) no-repeat 0 102%; }
.product-table tr td { padding:20px 0 20px 20px; }
.product-table tr td:first-child { padding:20px 20px 20px 0; }

.ver-red-line { width: 1px; height: 200px; background-color: #e3000f; position: relative; left: 50%; margin-bottom: 60px; }

.vitrine-item { margin-bottom: 70px; width: 560px; display: inline-block; float: left; }

.vitrine-item img { width: 100%; height: 190px; }

.hor-red-line { width: 560px; height: 1px; background-color: #e3000f; position: relative; top: -30px; }

/** Vitrine - end **/



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden { display: none !important; }

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible { visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after { background: transparent !important; color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; }

    a,
    a:visited { text-decoration: underline; }

    a[href]:after { content: " (" attr(href) ")"; }

    abbr[title]:after { content: " (" attr(title) ")"; }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }

    pre,
    blockquote { border: 1px solid #999; page-break-inside: avoid; }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead { display: table-header-group; }

    tr,
    img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

    p,
    h2,
    h3 { orphans: 3; widows: 3; }

    h2,
    h3 { page-break-after: avoid; }
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */