@charset "utf-8"; 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, input, textarea, 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, footer, 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; outline: none; font: 400 14px/20px 'Open Sans', sans-serif; color: #363636; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } a { outline: none; } body { line-height: 1; } 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; } a { cursor: pointer; text-decoration: none; }
body { background-color: #f5f5f5; border-top: 5px solid #cf2727; } section { display: block; width: 940px; padding: 0 0 21px 0; } h1, h2, h3, h4 { display: block; color: #4a4a4a; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } header strong img { margin: 21px 0 0 0; } header strong span { display: none; } #intro h1 { font: 800 89px/144px 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: -2px; } #intro h2 { font: 800 55px/55px 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 34px; color: #cf2727; border: 0 none; } #intro p { font: 400 16px/24px 'Open Sans', sans-serif; margin: 12px 0 12px 0; } #intro p a { font: 400 16px/24px 'Open Sans', sans-serif; border-bottom: 1px solid #cf2727; } #intro p a:hover { color: #ab0101; border-bottom: 1px solid #cf2727; } .wrap { display: block; width: 940px; margin: 0 auto; } section h2 { font: 800 34px/34px 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: -2px; padding-top: 13px; border-top: 1px solid #c2c2c2; margin-bottom: 21px; } section#ponude div.col { display: inline-block; float: left; width: 300px; margin: 0 20px 21px 0; position: relative; } section.columns :nth-child(3n+1).col { margin-right: 0 !important; } section#ponude div.col .content h3 { font: 800 21px/21px 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 13px; } section#ponude div.col .content p { margin-bottom: 9px; } section#ponude div.col .content ul { list-style-type: none; padding: 0 0 9px 21px; } section#ponude div.col .content ul li { text-indent: -8px; padding-bottom: 7px; } section#ponude div.col .content ul li::before { content: "–"; position: relative; left: -13px; color: #cf2727; } section#ponude div.col .content p span.cijena { } section#ponude div.col .content p span.cijena strong { font-weight: 800; font-size: 21px; color: #cf2727; margin-left: 5px; } section#ponude div.col .col-hover { display: none; position: absolute; z-index: 34; width: 300px; height: 101%; bottom: 0; } section#ponude div.col .col-hover-overlay { display: none; position: absolute; z-index: 21; width: 300px; height: 101%; background-color: rgba(245,245,245,.76); bottom: 0; } section#ponude div.col .col-hover p { display: block; width: 160px; height: 130px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 55px 0 0 50px; text-align: center; font: 300 16px/24px 'Open Sans', sans-serif; color: #fff; background-color: rgba(207,39,39,.89); padding: 40px 20px 30px 20px; } section#ponude div.col .col-hover p a { display: block; font: 800 16px/24px 'Open Sans', sans-serif; text-transform: uppercase; margin-top: 8px; color: #fff; text-shadow: 0 -1px 0 #ab1111; } section#ponude div.col .col-hover p a:hover { margin-top: 9px; } footer { display: block; margin: 0 auto; background: url(../../../Cms_Data/Sites/Metromk/Themes/default/img/bg/footer-upper-bg.png) 0 0 repeat; box-shadow: inset 0 2px 3px -1px #c2c2c2; } footer .upper { padding: 21px 0 21px 0; } footer .upper ul.info { display: inline-block; float: left; width: 300px; margin-right: 20px; } footer .upper ul.info li { margin-bottom: 4px; } footer .upper ul.info li span.doo { font-weight: 300; color: #545454; margin-left: 5px; } footer .upper ul.info li span.leader { display: inline-block; width: 76px; color: #545454; font-weight: 300; } footer .upper ul.info li a { color: #ab0101; } footer .upper ul.info li a:hover { color: #ab0101; border-bottom: 1px solid #cf2727; } footer .bottom { display: block; margin: 0 auto; background: url(../../../Cms_Data/Sites/Metromk/Themes/default/img/bg/footer-bottom-bg.png) 0 0 repeat; box-shadow: inset 0 2px 3px -1px #212121; height: 42px; } footer .bottom p.copyright { display: block; float: left; clear: left; margin-top: 12px; font: 300 14px/17px 'Open Sans',sans-serif; color: #8c8c8c; } footer .bottom p.development { float: right; clear: right; width: 141px; margin-top: 12px; } footer .bottom p.development span.dev { display: block; float: left; width: 40px; height: 17px; color: #8c8c8c; } footer .bottom p.development a { display: block; float: right; height: 17px; width: 89px; background: url(../../../Cms_Data/Sites/Metromk/Themes/default/img/bg/virtuabit.png) top left no-repeat; -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); } footer .bottom p.development a:hover { background-position: bottom left; } footer .bottom p.development a span { display: none;}