.displaynone {
display: none;
}
body {
margin: 0;
padding: 0;
font: 16px/normal 'Noto Serif', serif;
color: #000;
background-color: #f5f5f5;
}
.crna {
color: #404041;
}
.plava {
color: #212D63;
}
.crvena {
color: #960357;
}



@font-face {
    font-family: 'Icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.woff') format('woff'),
         url('../fonts/icomoon.ttf') format('truetype'),
         url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

a {
text-decoration: none;
color: #960357;
outline: none;
}
a:hover {
color: #212D63;
}

img {
display: block;
border: none;
}
.wrap {
max-width: 1240px;
min-width: 280px;
margin: 0 auto;
}
.wrap:after,
#search:after,
.links:after {
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}




/**** Header ****/

#head {
position: relative;
color: #000;
background-color: #fff;
background-color: #f5f5f5;
}

#head .left {
float: left;
margin: 20px 0 19px 20px;
}
#head .right {
float: right;
margin: 20px 20px 0 20px;
}



#sitetitle {
width: 298px;
padding: 17px 15px 20px;
font: 400 17px/17px "Noto Serif", serif;
text-transform: uppercase;
background-color: #fff;
}

#sitetitle a {
color: #212D63;
}
.logo {
display: block;
margin: 0 0 10px 18px;
font: normal 50px/50px "Icomoon", sans-serif;
}




#langnav {
float: left;
font: 400 16px/40px 'Roboto Condensed', sans-serif;
}
#langnav a {
display: block;
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
text-align: center;
color: #212D63;
border: 1px solid #212D63;
}
#langnav a:hover {
color: #960357;
border: 1px solid #960357;
}
#searchswitch {
display: block;
float: left;
width: 40px;
height: 40px;
text-align: center;
color: #212D63;
border: 1px solid #212D63;
}
#searchswitch:before {
content: "\e2ca";
display: inline-block;
width: 40px;
font: normal 24px/40px "Icomoon", sans-serif;
}

#searchswitch:hover {
color: #960357;
border: 1px solid #960357;
}


/*** Search slide ***/
#search {
position: absolute;
left: 0;
top: -10px;
width: 100%;
background: url(../img/blk70.png);
}
#searchcontainer {
display: none;
margin: 0 auto;
padding: 60px 20px;
width: 280px;
} 
#search input {
float: left;
height: 40px;
width: 200px;
margin: 0 10px 0 0;
padding: 0 8px;
font: 400 16px/16px 'Roboto Condensed', sans-serif;
color: #999;
border: 1px solid #444;
background-color: #fff;
}
#search input:focus {
color: #000;
}

#search input.button {
float: left;
width: 40px;
height: 40px;
padding: 0;
background: #212d63 url(../img/ico_go.png) no-repeat center center;
border: 1px solid #212d63;
}
#search input.button:hover {
background-color: #960357;
border: 1px solid #960357;
}
.searchform:after {
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

/*** end Search slide ***/










#topnav {
clear: both;
padding-top: 47px;
}
#topnav a {
text-transform: none;
font: 400 18px/18px 'Roboto Condensed', sans-serif;
color: #212d63;
}
#topnav a:first-child {
margin-right: 20px;
}
#topnav a:hover {
color: #960357;
}


/**** end Header ****/











/**** Navmain ****/

#navmain {
font: 400 19px/19px 'Roboto Condensed', sans-serif;
text-transform: uppercase;
background-color: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
z-index: 10;
}
#nav li ul li:last-child:after {
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
#nav a {
display: block;
}

a#navmainswitch {
display: none;
}


#nav, #nav ul { 
display: block;
margin: 0; 
padding: 0;
text-align: center;
}
#nav ul { 
font: 400 17px/19px 'Roboto Condensed', sans-serif;
text-transform: none;
text-align: left;
}


#nav li { 
position: relative;
display: inline-block;
padding: 0 15px;
list-style: none;
}
#nav li:first-child { 
padding-left: 0;
}
#nav li:last-child { 
padding-right: 0;
}

#nav li:last-child ul {
right: 0;
}
#nav li ul li,
#nav li ul li:first-child,
#nav li ul li:last-child { 
display: block;
padding: 0;
}


#nav li a { 
color: #212d63;
padding: 20px 0;
}
#nav li a:hover {
color: #960357;
}

#nav li.mommy a {
}
#nav li.mommy a:before {
content: "\f055";
display: inline-block;
font: normal 17px/19px "Icomoon", sans-serif;
padding-right: 5px;
}

#nav li.mommy a.open {
color: #960357;
}
#nav li.mommy a.open:before {
content: "\f057";
display: inline-block;
font: normal 17px/19px "Icomoon", sans-serif;
padding-right: 5px;
}
#nav li.mommy ul a {
padding: 12px 10px;
background: #fff;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#nav li.mommy ul a:before {
display: none;
}
#nav li.mommy ul a:hover {
background: #fff url(none);
}

#nav li ul {
display: none;
position: absolute;
width: 250px;
border-top: 1px solid #ccc;
z-index: 10;
}

/**** end Navmain ****/










/**** Content ****/

#content {
padding: 30px 0;
background-color: #fff;
}
#content .left {
display: table-cell;
vertical-align: top;
width: 640px;
}
#content .center {
display: table-cell;
vertical-align: top;
width: 320px;
}
#content .right {
display: table-cell;
vertical-align: top;
width: 220px;
padding: 0 20px;
}

.home #content .left h1,
.page.blog #content .left h1,
.page.list #content .left h1,
#content .center h1 {
margin: 0 20px 20px;
padding: 10px;
font: 400 18px/20px 'Roboto Condensed', sans-serif;
text-align: center;
background: url(../img/line_grey.png) repeat-x center center;
}
.page.blog.wide #content .left h1 {
margin: 0 20px;
padding: 10px 0;
}
.page.blog.wide.news #content .left h1 {
margin: 0 20px 20px;
}

h1 span {
padding: 0 10px;
background-color: #fff;
}
.single h1 span {
padding: 0;
}


.page.blog #content .left h1,
.page.list #content .left h1 {
margin: 0 0 30px;
}
.page #content .table {
width: 900px;
margin: 0 auto;
}

/**** blog wide ****/

.page.blog.wide #content .table,
.page.blog.wide #footer .table {
width: 1160px;
}
.page.blog.wide.news #content .table {
width: 1220px;
}

.page.blog.wide #content .left {
width: 920px;
}
.page.blog.wide.news #content .left {
width: 960px;
}
.page.blog.wide #content .right {
padding: 0 20px 0 0;
}
.page.blog.wide.news #content .right {
padding: 0 20px;
}
.blogcolumn {
width: 900px;
margin: 20px 0;
}
.news .blogcolumn {
width: 960px;
}

.blogcolumn .item {
position: relative;
float: left;
width: 258px;
height: 280px;
margin: 40px 20px 0 20px;
line-height: 21px;
border: 1px solid #ccc;
}
.blogcolumn .item img {
width: 100%;
}
.blogcolumn .item div {
margin: 10px;
}
.blogcolumn .item h4 {
margin: 10px 0 5px;
font-size: 19px;
}
.blogcolumn .item p {
margin: 0;
}
.item a.readon {
display: block;
width: 24px;
height: 25px;
position: absolute;
padding-left: 1px;
right: 0;
bottom: 0;
font: normal 17px/25px "Icomoon", sans-serif;
text-align: center;
background-color: #ccc;
}
.item a.readon:before {
content: "\e616";
color: #fff;
}
.item a.readon:hover {
background-color: #960357;
}


/**** end blog wide ****/

.orderitem {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.orderitem .check {
width: 30px;
float: left;
}
.orderitem .bookdesc {
padding-left: 30px;
}
.orderitem h4 {
font-size: 18px;
line-height: 22px;
font-weight: 700;
margin: 0 0 5px;
}
.orderitem p {
margin: 0 0 5px;
}
.check input {
margin: 0;
padding: 0;
}
.notice {
margin: 0 0 30px;
padding: 15px;
font: 400 16px/normal 'Roboto Condensed', sans-serif;
color: #fff;
background-color: #212D63;
}

.page .supertitle {
border-bottom: none;
padding: 0;
margin-bottom: 13px;
}

.module {
margin: 20px;
border-bottom: 1px dotted #212D63;
}
.news .left .module:nth-last-child(2), 
.news .left .module:nth-last-child(1) {
border-bottom: 1px dotted #212d63;
}
.center .module:last-of-type {
padding-bottom: 15px;
margin-bottom: 0;
border-bottom: none;
}
.module h2 {
margin: 0;
}

a.more_content {
display: inline-block;
margin: 20px;
font: 700 14px/17px 'Roboto Condensed', sans-serif;
text-transform: uppercase;
padding: 8px 12px;
color: #212d63;
border: 1px solid #212d63;
}
a.more_content:hover {
color: #960357;
}

.module.featured {
position: relative;
width: 600px;
padding-bottom: 35px;
}
.featured .supertitle {
padding: 14px 20px 0;
}
.featured h2 {
margin: 0;
padding: 10px 20px 20px;
font-size: 25px;
line-height: 32px;
}

.featured .introheading {
background-color: #f5f5f5;
}
.featured .introimage img {
width: 100%;
}
.featured .introtext {
margin: 20px 0;
}
.introtext p {
margin: 0;
}

.module.standard {
position: relative;
float: left;
width: 280px;
height: 440px;
padding-bottom: 40px;
}
.standard .introheading {
background-color: #f5f5f5;
}
.supertitle,
.page .module.standard .supertitle {
padding: 10px 10px 0;
font-size: 13px;
line-height: 18px;
max-height: 18px;
overflow: hidden;
text-transform: uppercase;
color: #666;
margin: 0;
}
.standard h2 {
height: 52px;
overflow: hidden;
margin: 0;
padding: 10px 10px 0 10px;
font-size: 18px;
line-height: 24px;
}
.standard .introimage {
height: 175px;
margin-top: 15px;
overflow: hidden;
}

.standard .introimage img {
width: 100%;
}
.standard .introtext {
margin: 20px 0;
line-height: 22px;
height: 110px;
overflow: hidden;
}


.module.info {
position: relative;
padding-bottom: 25px;
}
.info h2 {
margin: 0 0 15px;
font-size: 18px;
line-height: 24px;
}
.info h2 a {
color: #960357;
}
.info h2 a:hover {
color: #212D63;
}
.info .supertitle {
padding: 0;
margin: 30px 0 10px;
}

.info .introtext {
margin: 0 0 20px;
}


.textcolumn {
width: 600px;
margin: 20px;
}

.textcolumn h2:nth-of-type(1) {
clear: both;
}


.columns-2 .textcolumn {
-moz-columns: 2 185px;
-webkit-columns: 2 185px;
columns: 2 185px;
-moz-column-gap: 4em;
-webkit-column-gap: 4em;
column-gap: 4em;
min-height: 500px;
}

.columns-2 .textcolumn h1 {
-moz-column-span: all; 
-webkit-column-span: all; 
column-span: all; 
}

.blogitem {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px dotted #212D63;
}
.blogitem h2 {
margin: 0 0 15px;
font-size: 26px;
line-height: 32px;
}



.author {
font-size: 18px;
font-variant: small-caps;
}
.blogitem .wrap.date {
margin-top: 30px;
}
.izdanja .blogitem .wrap.date {
clear: both;
margin-top: 0;
padding-top: 30px;
}

.blogimage {
max-width: 180px;
margin: 1em 0;
}




/**** end Content ****/










/**** General Styling ****/

.sidemenu {
margin: 20px 0;
font: 400 17px/normal 'Roboto Condensed', sans-serif;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.sidemenu h3 {
margin: 0;
padding: 10px;
font: 400 18px/23px 'Roboto Condensed', sans-serif;
background-color: #fff;
}
.sidemenu.cart h3 {
padding: 10px;
border-bottom: 1px solid #dadada;
}
.sidemenu.cart h3:after {
content: "\e618";
font: normal 20px/23px "Icomoon", sans-serif;
color: #960357;
display: block;
float: right;
}
.sidemenu.cart p {
padding: 0 10px;
}
.sidemenu a {
display: block;
padding: 10px;
color: #000;
border-top: 1px solid #dadada;
}

.sidemenu a:hover {
color: #960357;
}
.textcolumn .introimage {
margin-bottom: 20px;
}
.textcolumn .introimage img {
width: 100%;
}
.textcolumn h1 {
margin: 0 0 25px;
padding: 0;
font-family: 'Noto Serif', serif;
font-size: 26px;
line-height: 32px;
text-align: left;
border: none;
}



.textcolumn h2 {
font-size: 22px;
line-height: 28px;
}
.textcolumn h3 {
font-size: 18px;
line-height: 24px;
}
.textcolumn h4 {
font-size: 16px;
line-height: 22px;
}





.staffheading {
margin-bottom: 30px;
}
.staffimage {
width: 48%;
float: left;
}
.staffimage img {
width: 100%;
}

.staffdata {
width: 48%;
float: right;
}
.staffdata p {
margin: 0 0 5px;
}


/*** sakrij podatke u blog layoutu ***/

.staffblog {
font-size: 15px;
}

.staffblog p:nth-of-type(3),
.staffblog p:nth-of-type(5) {
display: none;
}

.list .textcolumn h2:nth-of-type(1) {
margin-top: -10px;
}
.listgroup {
padding: 20px;
border: 1px solid #ccc;
}
.listgroup p {
margin: 15px 0 0;
}

.listgroup a {
color: #212D63;
}
.listgroup a:hover {
color: #960357;
}
.listgroup p a:nth-of-type(1):before {
content: "\e61b";
display: inline-block;
font: normal 20px/20px "Icomoon", sans-serif;
padding-right: 7px;
vertical-align: bottom;
}


.overview {
margin: -20px -20px 20px;
padding: 15px 20px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.listgroup .overview a {
font: 400 17px/20px 'Roboto Condensed', sans-serif;
color: #212D63;
}
.listgroup .overview a:before {
content: "\f00a";
display: inline-block;
font: normal 20px/20px "Icomoon", sans-serif;
padding-right: 8px;
vertical-align: bottom;
}
.listgroup .overview a:hover {
color: #960357;
}

.results ol li {
margin-bottom: 10px;
}
.results #content .left {
display: block;
margin: 0 auto;
}
.results .textcolumn {
margin: 0 20px;
}



/**** links****/

.links div {
margin-top: 17px;
border: 1px solid #212D63;
}

.links p.section {
margin: 30px 0;
padding: 10px;
font: 400 18px/20px 'Roboto Condensed', sans-serif;
text-align: center;
background: url(../img/line_grey.png) repeat-x center center;
}
.links p.section span {
padding: 0 15px;
background-color: #fff;
}


.links div img {
width: 100%;
}
.links h3 {
margin: 0;
padding: 10px;
font: 400 17px/20px 'Roboto Condensed', sans-serif;
}
.links h3 a {
color: #212D63; 
}
.links div:hover a {
color: #960357;
}

/**** end links ****/


h1, h2, h3 {
font-weight: 700;
}
h1 a,
h2 a,
h3 a {
color: #000;
}
h1 a:hover,
h2 a:hover,
h3 a:hover {
color: #960357;
}

p {
margin: 15px 0;
}
ul {
margin: 15px 0;
padding-left: 1em;
}
.table {
display: table;
width: 100%;
margin: 0;
padding: 0;
}

.introheading {
position: relative;
}
.blogdate,
.readmore {
float: left;
padding: 8px 10px;
font: 700 14px/17px 'Roboto Condensed', sans-serif;
background-color: #f5f5f5;
}
.readmore {
margin-left: 2px;
}

.basket_add a:hover {
border-color: #960357;
}
.readmore a {
display: block;
text-transform: uppercase;
}
.basket_add {
float: right;
}
.orderform .basket_add {
float: none;
width: 91px;
margin-top: 30px;
}

.basket_add a {
display: block;
padding: 7px 12px 6px 6px;
font: 600 14px/17px 'Roboto Condensed', sans-serif;
text-transform: uppercase;
color: #960357;
border: 1px solid #212D63;
}
.basket_add a:before {
content: "\e618";
font: normal 17px/17px "Icomoon", sans-serif;
color: #212D63;
display: block;
float: left;
padding-right: 6px;
}
.stamp {
border-bottom: 1px dotted #999;
padding-bottom: 10px;
margin-bottom: 25px;
}
.articledate, .catname {
float: left;
padding: 0 10px 0 0;
font: 400 14px/normal 'Roboto Condensed', sans-serif;
}
.catname {
text-transform: uppercase;
border-right: none;
}

a.fb {
height: 28px;
}
a.fb:before {
content: "\e61c";
font: normal 28px/28px "Icomoon", sans-serif;
display: block;
}
a.in:before {
content: "\e61d";
font: normal 28px/28px "Icomoon", sans-serif;
display: block;
}
a.tw:before {
content: "\e620";
font: normal 28px/28px "Icomoon", sans-serif;
display: block;
}

#social {
margin-top: 40px;
}
#social a, .social_label {
float: left;
margin-right: 10px;
color: #212D63;
}
#social a:hover {
color: #960357;
}
.social_label:before {
content: "Podijeli:";
font: 600 17px/28px 'Roboto Condensed', sans-serif;
color: #838383;
}


/**** cart ****/

.order {
margin: 30px 20px;
}

.table_orderitems {
display: table;
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.table_summary {
font: 400 16px/normal 'Roboto Condensed', sans-serif;
width: auto;
margin-top: 25px;
border-collapse: collapse;
}
.row {
display: table-row
}
.cell {
display: table-cell;
vertical-align: top;
text-align: right;
padding: 10px;
border: 1px solid #ccc;
}
.cell.th {
font: 700 16px/normal 'Roboto Condensed', sans-serif;
text-align: center;
color: #fff;
background-color: #212D63;
border-right: 1px solid #fff;
}
.cell.th:last-child {
border-right: 1px solid #ccc;
}
.qty {
text-align: center;
}
.qty input {
width: 80%;
padding: 5px;
text-align: center;
font: 400 15px/15px 'Roboto Condensed', sans-serif;
border: 1px solid #ccc;
}
.itemname, .ordervalue {
text-align: left;
}
.value {
white-space: nowrap;
}
.remove {
text-align: center;
vertical-align: top;
}
.remove a:before {
content: "\e29c";
font: normal 24px/normal "Icomoon", sans-serif;
display: inline-block;
}

.total {
font-weight: 700;
color: #fff;
background-color: #212D63;
}
.delivery {
margin: 20px 19px;
}

.cartbuttons {
padding: 20px 0 0 20px;
}

.cartbuttons .button {
font: 700 16px/16px 'Roboto Condensed', sans-serif;
margin: 20px 20px 20px 0;
padding: 10px;
min-width: 140px;
color: #fff;
border: none;
border-radius: 4px;
background-color: #960357;
cursor: pointer;
}
.cartbuttons .button:hover {
background-color: #212D63;
}

.userdata, .selectuser, .errornotice {
margin: 20px;
padding: 20px;
font: 400 16px/20px 'Roboto Condensed', sans-serif;
background-color: #f5f5f5;
}
.errornotice {
color: #fff;
background-color: #212D63;
}

.selectuser span {
white-space: nowrap;
}
.userdata h4 {
font: 700 18px/20px 'Roboto Condensed', sans-serif;
margin: 0 0 20px;
}

.userdata .leftcol,
.userdata .rightcol {
width: 50%;
float: left;
}
.mandatory {
margin: 0;
padding-top: 10px;
clear: both;
font-size: 15px;
color: #960357;
}
.userdata label {
display: inline-block;
}
.userdata .leftcol label {
min-width: 125px;
}
.userdata .rightcol label {
min-width: 110px;
}

.userdata input {
min-width: 220px;
padding: 10px;
margin-right: 10px;
font: 400 15px/15px 'Roboto Condensed', sans-serif;
border: 1px solid #ccc;
}

p.msgCart, p.msgCartEmpty {
padding: 20px;
text-align: center;
}


/**** end cart ****/




/**** Page navigation & Pagination ****/

.pagenav {
padding-top: 30px;
margin-top: 40px;
border-top: 1px dotted #999;
}
.pagenav div {
display: inline-block;
margin-right: 20px;
background-color: #fff;
border: 1px solid #212D63;
}
.pagenav div:hover {
border: 1px solid #960357;
}
.pagenav a {
display: block;
width: 80px;
height: 36px;
font: 600 14px/36px 'Roboto Condensed', sans-serif;
text-align: center;
text-transform: uppercase;
color: #212D63;
background-color: #fff;
}
.pagenav a:hover,
.pagination a:hover {
color: #960357;
border-color: #960357;
}


.pagination {
margin-top: 40px;
}
.blog.wide .pagination {
margin: 40px 20px 0;;
}
.pagination a {
display: block;
float: left;
width: 38px;
height: 38px;
margin: 0 10px 10px 0;
font: 600 16px/38px 'Roboto Condensed', sans-serif;
text-align: center;
color: #212D63;
background-color: #fff;
border: 1px solid #212D63;
}
.pagination a.start:before {
content: "\ea23";
font: normal 18px/38px "Icomoon", sans-serif;
}
.pagination a.end:before {
content: "\ea24";
font: normal 18px/38px "Icomoon", sans-serif;
}
.pagination a.prev:before {
content: "\e615";
font: normal 22px/38px "Icomoon", sans-serif;
}
.pagination a.next:before {
content: "\e616";
font: normal 22px/38px "Icomoon", sans-serif;
}
.pagination a.current {
color: #fff;
background-color: #212D63;
}
.pagination a.current:hover {
border: 1px solid #212D63;
}


/**** end Page navigation & Pagination ****/





/**** end General Styling ****/







/**** Footer ****/

#footer {
padding: 30px 0;
font: 16px/normal 'Roboto Condensed', sans-serif;
border-top: 1px solid #D3D3D3;
}
#footer .table {
position: relative;
margin: 0 auto;
}
#footer a {
color: #960357;
}
#footer a:hover {
color: #212d63;
}
#footer .left,
#footer .center,
#footer .right {
display: table-cell;
width: 40%;
padding: 20px;
}
#footer .left,
#footer .center {
border-right: 1px solid #212d63;
}
#footer .right {
width: 20%;
}

#footer h3 {
display: inline-block;
font: 400 21px/normal 'Roboto Condensed', sans-serif;
margin: 0 0 10px;
padding: 5px 12px;
color: #212d63;
border: 1px solid #212d63;
}
#footer p {
margin: 10px 0;
}
#kd {
position: absolute;
left: 20px;
bottom: -10px;
display: block;
width: 20px;
height: 20px;
background: url(../img/kd.png) no-repeat;
}

/**** end Footer ****/





/******* to top *******/
.fixed {
display: none;
height: 30px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
}
.fixed a {
display: block;
float: left;
width: 40px;
height: 40px;
}

#to_top:before {
content: "\e602";
font: normal 50px/50px "Icomoon", sans-serif;
}
/******* end to top *******/





/*** Video ***/

.video {
max-width: 600px;
text-align: center;
margin: 30px 0 20px;
padding: 20px;
background-color: #f4f4f4;
}
.shorty .video {
width: 590px;
}

.video iframe, .video object {
display: block;
margin: auto;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
margin-bottom: 20px;
}
.video .videoWrapper iframe,
.video .videoWrapper object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*** end Video ***/







/*** columns ***/

.columns.three {
-webkit-perspective:1;
-webkit-columns: 3 160px;
-moz-columns: 3 160px;
columns: 3 160px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 1px dotted #999;
-moz-column-rule: 1px dotted #999;
column-rule: 1px dotted #999;
}
.columns.three p {
margin-top: 0;
font-size: .9em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.columns.two {
-webkit-perspective:1;
-webkit-columns: 2 280px;
-moz-columns: 2 280px;
columns: 2 280px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
.columns.two p {
margin-top: 0;
}

/*** end columns ***/








/*** RIPU ***/


.ripu #content .wrap {
max-width: 1200px;
margin-top: 5px;
}
.sublangnav {
position: relative;
width: 100%;
padding-bottom: 5px;
}
.sublangnav a {
position: absolute;
top: 0;
right: 0;
}
.sublangnav img {
border: 1px solid #fff;
}
.sublangnav a:hover img {
border: 1px solid #212d63;
}

.ripu #content .left {
box-sizing: border-box;
width: 920px;
}
.ripu #content .right {
box-sizing: border-box;
width: 280px;
padding: 0 0 0 60px;
}


.ripu .current_image {
width: 240px;
float: left;
padding-bottom: 25px;
margin: 5px 40px 0 0;
}
.ripu .itemcontainer {
margin: 0 -15px;
display: flex;
flex-flow: row wrap;
}
.ripu .itemcontainer .item {
box-sizing: border-box;
flex: 0 1 237px;
padding: 15px;
min-width: 190px;
}
.ripu .current_image img,
.ripu .itemcontainer .item img {
width: 100%;
}
.ripu .current_image h4 {
margin: 1em 0 0;
}


.ripu h1 {
font-size: 30px;
margin: 0 0 40px 0;
}
.ripu.homepage h2:nth-of-type(1)::before {
content: " ";
display: block;
height: 10px;
margin-bottom: 25px;
clear: both;
border-bottom: 1px dotted #999;
}
.ripu p.supertitle {
margin: 0;
padding: 10px;
font: 400 18px/20px 'Roboto Condensed', sans-serif;
text-align: center;
background: url(../img/line_grey.png) repeat-x center center;
}
.supertitle span {
padding: 0 10px;
background-color: #fff;
}

























































/************* manje od 1260 px *************/

@media screen and (max-width: 1260px) {


.ripu #content .wrap {
max-width: 1200px;
}
.sublangnav {
padding-bottom: 15px;
}
.sublangnav a {
position: relative;
}

.ripu #content .right {
margin: auto;
padding: 0;
width: auto;
}
.ripu .current_issue,
.ripu #content .left {
width: 100%;
}
.ripu .itemcontainer {
width: 100%;
margin: 0;
justify-content: center;
}


#navmain {
font: 400 17px/20px 'Roboto Condensed', sans-serif;
}

#content .table, 
#content .left {
display: block;
}
#content .table,
.sublangnav {
width: 1024px;
margin: 0 auto;
}

.page #content .left {
display: block;
margin: auto;
width: auto;
}
.home #content .left {
float: left;
}
.page.blog.wide #content .table,
.page.blog.wide.news #content .table,
.page.blog.wide #footer .table {
width: 100%;
}
.page.blog.wide #content .left,
.page.blog.wide #content .right {
margin: auto;
padding: 0;
width: 900px;
}
.page.blog.wide.news #content .right {
width: 960px;
}


#content .center {
display: block;
float: left;
width: 364px; 
}

#content .right {
display: block;
padding: 0;
width: auto;
}
.home #content .right:before {
content: " ";
display: block;
height: 30px;
clear: both;
margin-top: 30px;
border-top: 1px solid #ccc;
}
.home .links {
width: 786px;
margin: 0 auto;
}
#content .right h1 {
margin: 0 0 20px;
}
.home .links div {
float: left;
width: 220px;
min-height: 220px;
margin: 20px;
}
.page .sidemenu {
width: 600px;
margin: 20px auto;
}
.page.blog.sidemenu,
.page.blog.wide .sidemenu {
margin: 20px;
width: auto;
}

.textcolumn {
margin: 0 auto 40px;
}

.page #content .table {
margin: 0 auto;
width: auto;
}
#footer .table {
width: 1024px;
margin: 0 auto;
}
.page.blog.wide #footer .table {
width: 900px;
}




}













/************* manje od 1120 px *************/

@media screen and (max-width: 1120px) {


.ripu #content {
padding-left: 20px;
padding-right: 20px;
}
.ripu #content .table,
.sublangnav {
width: 100%;
}

/*** Navmain ***/

#navmain a#navmainswitch {
display: block;
color: #212D63;
padding: 8px 20px;
}
#navmain a#navmainswitch:before {
content: "\e617";
display: block;
font: normal 30px/30px "Icomoon", sans-serif;
}
#navmain a#navmainswitch:hover {
color: #960357;
}

#nav {
display: none;
width: 100%;
position: absolute;
left: 0;
z-index: 100;
border-bottom: 1px solid #d3d3d3;
}

#nav li, #nav li.mommy {
display: block;
text-align: left;
padding: 0;
background-color: #fff;
border-top: 1px solid #d3d3d3;
}

#nav li ul {
position: static;
border: none;
margin-top: 0;
width: auto;
}

#nav li a {
padding: 13px 20px 13px 50px;
} 

#nav li.mommy ul a {
padding: 10px 20px 10px 0;
margin-left: 23px;
border: none;
background: transparent;
}
#nav li.mommy ul a:before {
content: "—";
display: inline-block;
padding-right: 5px;
margin-left: -23px
}

#nav li.mommy ul a,
#nav li.mommy ul li:last-child a {
padding: 13px 10px 13px 50px;
}

#nav li ul li:first-child {
border-top: 1px solid #d3d3d3;
}

#nav li.mommy ul a:hover {
background: #fff url(none);
}

/*** end Navmain ***/



.home #content .left,
#content .center,
.module.featured {
float: none;
width: 640px;
margin: 20px auto;
padding-left: 0;
}
#content .center {
margin: 0 auto;
}
.home #content .left h1 {
margin: -30px 0 20px;
}
#content .center h1 {
margin: 0;
}

.featured .introimage {
width: 100%;
}

.featured h2 {
float: none;
margin: 0;
width: auto;
}
.featured .date {
position: static;
width: auto;
margin-top: 20px;
}



#footer .table {
width: 100%;
margin: 0;
}
#footer .left,
#footer .center,
#footer .right {
width: 35%;
}
#footer .right {
width: 30%;
}

.page.blog #content .left h1 {
margin: 0 -20px 30px;
}
.page.blog.wide #content .left h1,
.page.blog.wide.news #content .left h1 {
margin: -20px 0 30px;
}


}







/************* manje od 1024 px *************/

@media screen and (max-width: 1023px) {

#content .table {
width: 100%;
}
.home .links {
width: 726px;
margin: auto;
}
.home .links div {
width: 200px;
min-height: 200px;
}




.page.blog.wide #content .left,
.page.blog.wide #content .right {
width: 600px;
}
.page.blog.wide.news #content .left,
.page.blog.wide.news #content .right {
width: 640px;
}
.page.blog.wide.cart #content .left,
.page.blog.wide.cart #content .right {
width: auto;
}

.blogcolumn,
.news .blogcolumn {
width: auto;
}
.page.blog.wide #footer .table {
width: 100%;
}

#footer .left {
width: 40%;
}
#footer .center, #footer .right {
width: 30%;
}

.userdata label {
padding-bottom: 5px;
}


}








/************* manje od 980 px *************/

@media screen and (max-width: 979px) {


.userdata label {
display: block;
}

}






/************* manje od 768 px *************/

@media screen and (max-width: 767px) {


#head .left {
width: 60%;
}

#head .right {
margin: 20px;
width: 156px;
}

#searchswitch {
margin-top: 0;
}
#searchcontainer {
padding: 32px 20px;
} 









#footer .left,
#footer .center,
#footer .right {
border-right: none;
border-bottom: 1px solid #212d63;
display: block;
padding: 30px 20px 20px;
width: auto;
}
#footer .right {
border-bottom: none;
}



.module.featured {
padding: 0 20px 40px;
width: auto;
}


.textcolumn {
margin: 0 20px 40px;
width: auto;
}
.page .sidemenu {
width: auto;
margin: 20px;
}

.home .links div {
width: 220px;
min-height: 220px;
}



.home .links {
width: 524px;
}

#footer {
padding: 0 0 30px 0;
}


}









/************* manje od 640 px *************/

@media screen and (max-width: 639px) {

.sublangnav {
padding-bottom: 0;
}

.ripu .current_image {
float: none;
width: auto;
margin: 0 0 30px;
padding: 10px 0;
background-color: #F5F5F5;
}
.ripu .current_image img {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.ripu .current_image h4 {
text-align: center;
}
.ripu.homepage h2:nth-of-type(1)::before {
height: 10px;
margin-bottom: 20px;
}
.ripu h1 {
font-size: 24px;
margin: 20px 0;
}

.ripu h2 {
font-size: 20px;
}



#head .left {
width: auto;
}

#head .right {
width: 42px;
margin: 20px 20px 20px 10px;
}
#langnav {
padding: 0;
}
#langnav a {
margin: 0 0 10px 0;
}

#topnav {
padding: 0;
position: absolute;
left: 20px;
bottom: 16px;
width: 150px;
}
#topnav a {
font: 400 17px/17px "Roboto Condensed",sans-serif;
}


.home #content .left, 
#content .center {
width: auto;
}
#content .center {
padding-bottom: 1px;
}

.module.featured {
margin: 0 0 40px;
width: auto;
}
.module.standard {
float: none;
height: auto;
margin: 20px auto 40px;
}
.module.info {
width: 280px;
margin: 20px auto;
}
a.more_content {
width: 256px;
display: block;
margin: 20px auto 30px;
text-align: center;
}
.home .links {
width: 262px;
}
.home .links div {
float: none;
min-height: 0;
}


.page.blog.wide #content .left,
.page.blog.wide.news #content .left,
.page.blog.wide #content .right,
.page.blog.wide.news #content .right {
width: auto;
}
.blogcolumn .item {
float: none;
margin: 40px auto 0;
}
.pagination div:last-child {
margin: 0 0 10px 0;
}


/*** cart ***/

.row {
display: block;
}
.table_orderitems,
.table_summary {
}
.table_orderitems .row:after {
content: " ";
display: block;
height: 20px;
clear: both;
}
.table_summary {
border-top: 1px solid #ccc;
}
.table_orderitems .row:nth-of-type(1) {
display: none;
}

.cell {
display: block;
width: 100%;
padding: 0;
min-height: 27px;
text-align: left;
border: none;
border-bottom: 1px solid #ccc;
}
.cell span {
display: block;
padding: 10px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.cell.number {
width: 25px;
padding: 5px 10px;
min-height: 0;
font-weight: 700;
text-align: center;
color: #fff;
background-color: #212D63;
border: none;
}
.cell.itemname {
border-top: 1px solid #ccc;
}
.cell.itemname span:before {
content: "Naslov: ";
font-weight: 700;
}
.cell.value span:before {
content: "Cijena: ";
font-weight: 700;
}
.cell.value.sum span:before {
content: "Ukupno: ";
font-weight: 700;
}
.cell.qty span:before {
content: "Količina: ";
font-weight: 700;
}
.qty input {
width: auto;
margin-left: 5px;
}

/*** end cart ***/

.results ol {
margin: 0;
padding: 0 0 0 1.5em;
}

.selectuser span {
display: block;
margin: 5px 0;
}

.userdata .leftcol,
.userdata .rightcol {
width: auto;
float: none;
}
.userdata .leftcol label,
.userdata .rightcol label {
min-width: none;
}
.userdata label {
padding-right: 0;
}
.userdata input {
margin-right: 0;
width: 378px;
}

.staffimage, .staffdata {
width: 100%;
float: none;
}
.staffdata {
margin-top: 15px;
}

.home #content .left h1,
.page.blog #content .left h1,
.page.list #content .left h1,
#content .center h1,
#content .right h1 {
background: #212D63 url(none);
color: #fff;
}
h1 span {
background-color: transparent;
}

#content .left .textcolumn h1 {
font-size: 24px;
line-height: 30px;
}
.featured h2 {
font-size: 23px;
line-height: 29px;
}
.standard h2 {
height: auto;
}
.textcolumn h2 {
font-size: 20px;
line-height: 28px;
}
.textcolumn h3 {
font-size: 18px;
line-height: 24px;
}
.textcolumn h4 {
font-size: 16px;
line-height: 22px;
}




}









/************* manje od 480 px *************/

@media screen and (max-width: 479px) {

body {
font-size: 15px;
}

#head {
padding-bottom: 10px;
}
#head .left {
float: none;
margin: 20px;
}
#head .right {
float: none;
padding: 0 0 0 10px;
width: auto;
}

#sitetitle {
width: auto;
font: 400 15px/15px "Noto Serif",serif;
}
.logo {
font: normal 41px/41px "Icomoon", sans-serif;
margin: 0 0 8px 13px;
}



#langnav {
font: 400 15px/30px "Roboto Condensed",sans-serif;
}
#langnav a {
height: 30px;
margin-right: 5px;
width: 30px;
}
#topnav {
bottom: 17px;
width: auto;
left: auto;
right: 20px;
z-index: 0;
}
#topnav a:first-child {
margin-right: 10px;
}
#search {
top: -20px;
z-index: 10;
}
#searchswitch:before {
font: 18px/30px "Icomoon",sans-serif;
width: 30px;
}
#searchswitch {
height: 30px;
width: 30px;
}

#content .left .textcolumn h1 {
font-size: 26px;
line-height: 30px;
}

#nav li a {
padding: 13px 20px;
}
#nav li.mommy ul a,
#nav li.mommy ul li:last-child a {
padding: 13px 10px 13px 20px;
}
.featured h2,
.blogitem h2 {
font-size: 19px;
line-height: 25px;
}

#content .left .textcolumn h1 {
font-size: 23px;
line-height: 29px;
}
.textcolumn h2 {
font-size: 19px;
line-height: 25px;
}
.textcolumn h3 {
font-size: 17px;
line-height: 23px;
}
.textcolumn h4 {
font-size: 16px;
line-height: 22px;
}

.userdata input {
width: 258px;
}

.standard .introtext {
height: auto;
line-height: normal;
}


}






/************* manje od 375 px *************/

@media screen and (max-width: 374px) {



#content .left .textcolumn h1 {
font-size: 22px;
line-height: 28px;
}
.textcolumn h2 {
font-size: 18px;
line-height: 26px;
}
.textcolumn h3 {
font-size: 16px;
line-height: 22px;
}
.textcolumn h4 {
font-size: 15px;
line-height: 25px;
}

.blogitem h2, .featured h2 {
font-size: 18px;
line-height: 26px;
}

.userdata {
padding: 20px 15px;
}
.userdata input {
min-width: 0;
width: 218px;
}


}



/************* manje od 360 px *************/

@media screen and (max-width: 359px) {



#sitetitle {
width: 250px;
font: 400 14px/14px "Noto Serif",serif;
}

.logo {
font: normal 39px/39px "Icomoon", sans-serif;
}

.pagination a {
margin: 0 6px 6px 0;
}


}