body {
   background-color: white;
   padding: 0;
   margin: 0;
   overflow: auto;
   font-family: Roboto, arial, helvetica, sans-serif;
   font-size: 14px;
   background-image: url(gui/nadlanu_bg.jpg);
   background-attachment: fixed;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center top;
}

.purgatory { clear: both; }

.greengrad {
   background: rgb(228,239,192);
   background: -moz-linear-gradient(top,  rgba(228,239,192,1) 0%, rgba(171,189,115,1) 100%);
   background: -webkit-linear-gradient(top,  rgba(228,239,192,1) 0%,rgba(171,189,115,1) 100%);
   background: linear-gradient(to bottom,  rgba(228,239,192,1) 0%,rgba(171,189,115,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4efc0', endColorstr='#abbd73',GradientType=0 );
}

@font-face {
   font-family: 'FontAwesome';
   src: url('font_awesome/fontawesome-webfont.eot?v=4.6.3');
   src: url('font_awesome/fontawesome-webfont.eot?#iefix&v=4.6.3')
        format('embedded-opentype'), url('font_awesome/fontawesome-webfont.woff2?v=4.6.3')
        format('woff2'), url('font_awesome/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('font_awesome/fontawesome-webfont.ttf?v=4.6.3')
        format('truetype'), url('font_awesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular')
        format('svg');
   font-weight: normal;
   font-style: normal;
}

* { box-sizing: border-box; }

a { text-decoration: none; outline: none; }
a:focus { outline: none; }

header {
   position: fixed;
   top: 0px;
   left: 50%;
   width: 960px;
   height: 120px;
   margin-left: -480px;
   background-color: rgba(255, 255, 255, .9);
   z-index: 100;
   border-bottom: solid 1px green;
}

nav {
   position: absolute;
   top: 20px;
   left: 280px;
}

nav a {
   display: inline-block;
   margin-right: 5px;
   border-bottom: solid 4px gainsboro;
   padding: 15px 0 5px 0;
   color: gray;
   text-align: center;
   width: 120px;
}

nav a span {
   display: block;
   font-family: FontAwesome;
   padding: 5px;
   font-size: 24px;
}

nav a:hover, nav a.active {
   color: green;
   border-bottom: solid 4px green;
}

#logo {
   height: 100%;
   width: auto;
   margin-left: 10px;
}

#wrapper {
   position: relative;
   margin: 119px auto 30px auto;
   width: 960px;
   min-height: 1080px;
   padding-bottom: 20px;
   background-color: rgba(255, 255, 255, .8);
   -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,1);
   -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,1);
   box-shadow: 0px 0px 35px 0px rgba(0,0,0,1);
}

#carousel {
   margin: 50px auto 70px auto;
   height: 200px;
   position: relative;
   perspective: 1000px;
   transform-style: preserve-3d;
   transform: rotateX(-10deg);
   text-align: center;
}

#wheel {
  width: 250px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -125px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.slide {
   display: block;
   position: absolute;
   background: white;
   width: 250px;
   height: 150px;
   text-align: left;
   color: black;
   opacity: 0.95;
   border-radius: 15px;
   -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,.5);
   -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,.5);
   box-shadow: 0px 0px 35px 0px rgba(0,0,0,.5);
}

.slide span {
   display: block;
   padding: 5px 10px;
   background-color: green;
   color: white;
   border-radius: 15px;
}

.section {
   display: block;
   color: green;
   border-top: solid 1px green;
   font-size: 120%;
   font-weight: bold;
   text-align: right;
   padding: 10px 20px;
}

.ponedjeljak { transform: rotateY(0deg) translateZ(300px); }
.utorak { transform: rotateY(60deg) translateZ(300px); }
.srijeda { transform: rotateY(120deg) translateZ(300px); }
.cetvrtak { transform: rotateY(180deg) translateZ(300px); }
.petak { transform: rotateY(240deg) translateZ(300px); } 
.subota { transform: rotateY(300deg) translateZ(300px); }

.next, .prev {
  color: white;
  position: absolute;
  top: 50%;
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  background: green;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 black;
  transition: box-shadow 0.1s, top 0.1s;
}

.next:hover, .prev:hover { background-color: orangered; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 40px; }
.prev { left: 40px; }

.grupa {
   padding: 10px 20px;
   border-top: solid 1px green;
   border-bottom: solid 1px green;
   margin-bottom: 20px;
   font-size: 120%;
   font-weight: bold;
   color: green;
   background-color: white;
}

.eatCard {
   position: relative;
   border: solid 1px green;
   width: 30%;
   float: left;
   min-height: 150px;
   margin-left: 2.5%;
   margin-bottom: 20px;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, .5);
}

.eatCard .number {
   display: inline-block;
   padding: 5px;
   width: 20%;
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;
   color: white;
   background-color: green;
   font-size: 130%;
   font-weight: bold;
   text-align: center;
}

.eatCard .price {
   display: inline-block;
   padding: 5px;
   width: 80%;
   color: orangered;
   border-bottom: solid 1px orangered;
   font-size: 130%;
   font-weight: bold;
   text-align: right;
}

.eatCard .naziv {
   display: block;
   padding: 8px;
   font-weight: bold;
}

.eatCard .opis {
   display: block;
   padding: 0 5px 5px 8px;
   color: green;
}

.eatCard a {
   display: inline-block;
   padding: 3px 10px;
   border: solid 1px orangered;
   color: orangered;
   position: absolute;
   bottom: 5px;
   border-radius: 15px;
   min-width: 120px;
   text-align: center;
   background-color: rgba(255, 255, 255, .3);
}

.eatCard a:hover {
   background-color: orangered;
   color: white;
}

.eatCard .saznaj { left: 5px; }

.eatCard .ukosaricu { right: 5px; }

/* ---------------------------------------------------------- */

.eatRow {
   position: relative;
   border-bottom: solid 1px green;
   width: 95%;
   display: block;
   margin-left: 2.5%;
   background-color: rgba(255, 255, 255, .5);
   padding: 5px;
   min-height: 50px;
   margin-bottom: -1px;
   border-radius: 0px;
}

.eatRow .number {
   display: inline-block;
   padding: 5px;
   width: 50px;
   border-radius: 10px;
   color: white;
   background-color: green;
   font-size: 130%;
   font-weight: bold;
   text-align: center;
   float: left;
   margin-right: 20px;
   margin-bottom: 40px;
}

.eatRow .price {
   display: inline-block;
   padding: 10px;
   color: orangered;
   border: none;
   float: right;
   font-size: 130%;
   font-weight: bold;
   text-align: right;
   width: auto;
}

.eatRow .naziv {
   display: block;
   padding: 8px;
   font-weight: bold;
}

.eatRow .opis {
   display: block;
   padding: 0 5px 5px 8px;
   color: green;
}

.eatRow a {
   display: inline-block;
   padding: 3px 10px;
   float: right;
   position: relative;
   border: solid 1px orangered;
   color: orangered;
   border-radius: 15px;
   min-width: 120px;
   text-align: center;
   background-color: rgba(255, 255, 255, .3);
}

.eatRow a:hover {
   background-color: orangered;
   color: white;
}

.eatRow .ukosaricu { margin-left: 20px; }

.alacart {
   margin-bottom: 20px;
}

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

   #wrapper {
      width: 100%;
   }

.eatCard {
   position: relative;
   border-bottom: solid 1px green;
   width: 95%;
   display: block;
   margin-left: 2.5%;
   background-color: rgba(255, 255, 255, .3);
   padding: 5px;
   min-height: 50px;
   margin-bottom: -1px;
   border-radius: 0px;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
}

.eatCard .number {
   display: inline-block;
   padding: 5px;
   width: 50px;
   border-radius: 10px;
   color: white;
   background-color: green;
   font-size: 130%;
   font-weight: bold;
   text-align: center;
   float: left;
   margin-right: 20px;
   margin-bottom: 40px;
}

.eatCard .price {
   display: inline-block;
   padding: 10px;
   color: orangered;
   border: none;
   float: right;
   font-size: 130%;
   font-weight: bold;
   text-align: right;
   width: auto;
}

.eatCard .naziv {
   display: block;
   padding: 8px;
   font-weight: bold;
}

.eatCard .opis {
   display: block;
   padding: 0 5px 5px 8px;
   color: green;
}

.eatCard a {
   display: inline-block;
   padding: 3px 10px;
   float: right;
   position: relative;
   border: solid 1px orangered;
   color: orangered;
   border-radius: 15px;
   min-width: 120px;
   text-align: center;
   background-color: rgba(255, 255, 255, .3);
}

.eatCard a:hover {
   background-color: orangered;
   color: white;
}

.eatCard .ukosaricu { margin-left: 20px; margin-top: 10px; }

.eatCard .saznaj { margin-top: 10px; }

.alacart {
   margin-bottom: 20px;
}

}