/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
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;}

img {max-width: 100%; height: auto}

sup {
    top: -.35em;
    position: relative;
    font-size: .8em;
}

/*  Oštrač starts here  */

html {height: 100%}
body {font-size: 18px; font-family: 'PT Sans Caption', sans-serif; height: 100%}
h1, h2, h3, h4 {font-family: 'Roboto Condensed', sans-serif; line-height: 1.25em; letter-spacing: 0.035em; margin: .75em 0}
h1, h2, h3 {text-transform: uppercase; font-weight: bold}

h1 {font-size: 36px}
h2 {font-size: 28px}
h3 {font-size: 21px}
h4 {font-size: 20px}

p, img {margin-bottom: 1.6em}
p {line-height: 1.6em}

.shrink {width: 90%; margin: 0 auto}



/**          Header            **/

.site-wrap {display: table; width: 100%; height: 100%; overflow-x: scroll}
.side-banner {display: table-cell; vertical-align: top; min-width: 60px; width: 20%; background: #2f2d2a; position: relative}

.logo {display: inline-block;}
.logo img {height: 100%; margin: 0}

.side-banner a {color: #fff}

.toggle-nav {display: block; text-align: center; cursor: pointer}

.mainnav {display: none; right:80%}
.mainnav ul {list-style: none}
.mainnav li {display: block;}
.mainnav a {display: block; margin: 1em; text-decoration: none}

.lang li {display: inline-block; font-size: .75em; vertical-align: top}
.lang a {margin: .25em; text-align: center}
.flag {width:24px; display: block; margin: 10px auto}
.lat {font-size: .6em; padding-top: .25em; display: block; text-transform: uppercase; letter-spacing: 0.2em}


.mainnav.toggled-on {display: block; position: fixed; z-index: 100; top:0; bottom: 0; right:0; left: 20%; background: #2f2d2a}
.mainnav.toggled-on ul {margin-top: 50%; transform: translateY(-50%); margin-left: 50%; transform: translate3d(-50%,-50%,0)}


/**           Content         **/

.content {display: table-cell; vertical-align: top; padding: 2em 0; box-shadow: -1px 0 4px 3px rgba(0,0,0,.3); z-index: 2; position: relative}

.intro {font-size: 1.25em; font-weight: 300; margin-bottom: 1em}

.featured {display: grid; grid-template-columns: 1fr 1fr; align-items:center; margin: 2em 0}
.featured .hero {grid-row: 1 / 3; grid-column: 1 / 3}
.featured div {padding: 10px}
.featured img {margin: 0}

.price-title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: .75em 0;
}

.price-title .cards-logo {
  height: 1em;
  width: auto;
  margin: 0;
  vertical-align: middle;
}


/*  Override Tabs   */

.ui-widget.ui-widget-content, .ui-widget-header {border:none; background: none; padding: 0}
.ui-tabs .shrink.ui-tabs-nav {margin: 0 auto}
.tabs-border {border-bottom: 1px solid #222422}

.ui-tabs .ui-tabs-nav li {font-family: 'Roboto Condensed'}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #343331;
    border-color: #222422;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border-radius: 0;}


/**           Tabela         **/

.colitem {min-width: 50%}
table {width: 100%}
tr {border-bottom: 1px solid}
th, td {padding: 1em; border-right: 1px solid}
th:last-of-type, td:last-of-type {border: none}
tr, th, td {border-color: #ddc}

.colitem, th {font-weight: 600; text-transform: uppercase}
td:not(.colitem) {text-align: center}



/*****           RESPONSIVE          *****/

@media (max-width:480px) {

    body {font-size: 16px;}
    table, .ui-tabs .ui-tabs-nav li {font-size: .7em}
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {padding: 1em .5em}
    .ui-tabs .ui-tabs-panel {padding: 1em 0}
}
@media (min-width:768px) {
    .logo {display: block; height: 500px; margin: 0 auto}

    .toggle-nav {display: none}
    .mainnav {display: block}

    h1 {font-size: 72px}
    h2 {font-size: 56px}
    h3 {font-size: 36px}
    h4 {font-size: 24px}

    .side-banner {text-align: center; width: 20%; height: 100%;}
    .content {padding: 90px 0; padding: 9vh 0}

    /*.featured {grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px;}*/

    .featured div img {transition: transform .25s cubic-bezier(0,.2,.54,.95)}
    .featured div:hover > img {transform: scale(1.05)}
}

@media (min-width:1440px) {
    .shrink {width: 780px}

    /*.featured {margin: 2em 20px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
    .featured .hero {grid-row: 1 / 3; grid-column: 3 / 5}*/

}