html, body, div,
h1, h2, h4, h5, h6,p, strong,
b, u, i, ol, ul, li, form {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	overflow-x:hidden;
	line-height: 1;
}
ul {list-style: none;}
p{margin:10px 0;}
a{text-decoration:none}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 90%;
    }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 90%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .six.columns                    { width: 48%;            }
  .nine.columns                   { width: 74.0%;          }

}


html {font-size: 62.5%; }
body {
	font-size: 1.5em;
	line-height: 1.6;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	color: #333d4b;
	background: #fff;
}



h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  margin-top: 20px; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.2rem; font-weight: 400;}
}
h5 span {
	color: #82b63a;
	font-weight: 600;
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #100E1B; }
a:hover {
  color: #100E1B; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* =Nav
-------------------------------------------------------------- */
header {
	background: #fff;
	width: 100%;
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	z-index: 990;
}
.navigation {
	background: #fff;
}
nav#nav-main {
  padding: 10px 0;
}
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right; }
  nav#nav-main li {
    display: inline-block;
    padding: 0 5px; }

  nav#nav-main a {
    display: block;
    color: #100E1B;
	font-weight:bold;
    padding: 5px 10px;
	text-decoration: none;
	}
    nav#nav-main a:hover {
		color: #100E1B;
		text-decoration:underline;
		transition:text-decoration ease 0.5s;
	}

img.mainlogo {
	padding:5px;
	max-height:60px;
}
.button_container {
	display: none;
	position: fixed;
	top:20px;
	right: 20px;
	height: 27px;
	width: 35px;
	cursor: pointer;
	transition: opacity .25s ease;
	z-index: 999;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #100E1B;
}
.button_container.active .middle {
  opacity: 0;
  background: #100E1B;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #100E1B;
}
.button_container span {
  background: #100E1B;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}



/* Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 1150px) {
  .button_container {
    display: block; }

  nav#nav-main {
    display: none; }
	
	.mob-menu{position:fixed;top:0;left:0;width:70%;max-width:400px;box-shadow:0 0 4px #aaa;z-index:1000;background:#fff;padding:20px}
	.mob-menu li a{color:#100E1B;padding:5px;font-size:2rem;margin-bottom:3px;display:block}
	.mob-menu li a:hover{border-bottom:2px solid #100E1B;padding-bottom:3px}
	header .navigation .three.columns, header .navigation .nine.columns{width:50%}
}


/* Custom styles
-------------------------------------------------------------- */

footer {
	padding: 40px 0;
	background: #fff;
	width: 100%;
	color: #333;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

strong,.strong {
	font-weight: 600;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

.desktop-show{display:none}
.tablet-show{display:block}

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.whitesection h2 {
		text-align: right;
	}
	h3 {
		font-size: 4em;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {
	h3 {
		font-size: 4.8em;
	}
	.desktop-show{display:block}
	.tablet-show{display:none}
}



/*dodani custom CSS*/
.cjenik-ul{padding-left:30px; list-style:disc; margin-bottom:20px}
.cjenik-ul li{padding:5px;font-size:105%}
#narucite a, #narucite a .fa{color:#fff}
.granica-gore{border-top:30px solid #100E1B}
.italic{font-style:italic}
.logo a{display:table;vertical-align:middle}
.aronia{background:#100E1B;color:#fff;padding:50px 0}
.dfdf{background:#dfdfdf}
.tab-vertical{display:table;vertical-align:middle;width:100%}
.tab-vertical-cell{display:table-cell;vertical-align:middle;float:none}
.edu-cijena-single{width:100%}
img{max-width:100%;max-height:100%;}
div.imgonly{line-height:0}
.intro-img{max-height:480px}
.hidd{display:none;}
.padd50-0{padding:50px 0}
.margin20-0{margin:20px 0;}
.mtop20{margin-top:20px}
.intro-section{margin-top:80px;padding-top:50px;background:#fff;margin-bottom:80px}
.intro-section .cont{padding-right:40px}
.mtop50{margin-top:50px;}
.toggle-cilj{cursor:pointer}
i{font-style:italic;}

.aronija-desno{background:#dfdfdf url('../images/aronija_desno.jpg') center right no-repeat;background-size:50% auto;padding:40px 0 70px}
.content-section h2{color:#100E1B;margin-bottom:20px}
.content-section img{padding:0 0 0 20px;max-height:520px;max-width:800px}
.eeee{background:#eee}

.ikona a{width:240px;height:240px;border-radius: 50%;background-size:cover;background-position:center;display:block;margin:0 auto 30px;box-shadow:0 1px 4px #ccc}
.edukacije h4{font-size:2.2rem;margin:10px 0 25px;color:#82b63a;text-transform:uppercase}
.edukacije .i2 img{max-height:76px;width:auto}
.edukacije .four{font-size:1.6rem;font-weight:300;padding:50px 10px;transition:background-color ease .6s;margin-left:0;width:33.33333%}
.toggle, .toggle-table, .toggle-flex, .slide-toggle{cursor:pointer}
.edukacije .act-img{display:none}
.edukacije .active-edu .act-img{display:block;margin:auto}
.edukacije .active-edu .inact-img{display:none}
.edukacije .active-edu, .edukacije .detalji{color:#fff;background:#7bb1df}
.edukacije .active-edu h4{color:#fff}
.edukacije .active-edu{color:#fff;padding-bottom:56px}
.edukacije .cijena{text-align:center;padding:20px;box-sizing:border-box;vertical-align:top}
.edukacije .cijena a{display:block;background-color:#fff;padding:10px;text-align:center;color:#3a2a7d;font-weight:bold;text-transform:uppercase;font-size:1.4rem;text-decoration:none;margin-top:20px;transition:color ease 0.5s, background-color ease 0.5s}
#dodatna-edukacija .cijena a{border:1px solid #3a2a7d;}
.edukacije .cijena a:hover{transition:color ease 0.5s, background-color ease 0.5s;color:#fff;background-color:#3a2a7d}
.edukacije .edu-cijena{font-size:3.5rem;color:#3a2a7d;font-weight:bold}
.edukacije .detalji{padding:50px 0;}
.edukacije .detalji .naslov{font-size:2.2rem;text-transform:uppercase;}
.edukacije .detalji .dodatno{border:2px solid #fff;margin-top:20px;padding:8px 5px 0}
.edukacije .navi .container{line-height:0}
.edukacije .four{line-height:1.5}

form input, form select, form textarea{display:block;padding:12px 6px;border:none;border-radius:6px;width:100%;margin:5px 0 12px;box-sizing:border-box;font-family:'Open-Sans', sans-serif;}
form textarea{min-height:120px}

form input[type=submit]{display:block;background:transparent;text-align:center;padding:12px 6px;border-radius:6px;margin-bottom:16px;text-decoration:none;color:#3a2a7d;border:1px solid #3a2a7d}
form input[type=submit]:hover{background-color:#3a2a7d;color:#fff;transition:background-color ease .5s, color ease .6s}
form input[type=submit]{margin:10px 0 0 auto;max-width:180px;padding:15px;text-transform:uppercase;cursor:pointer;font-weight:bold;border:none;background:#eee}
#prijava .forma-div{padding-left:25px;overflow:hidden}
.kontakt-gumb a{color:#3a2a7d;padding:10px 0 5px;margin-bottom:5px;border-bottom:1px solid #3a2a7d;text-decoration:none;display:inline-block;min-width:270px;padding-left:25px;background-size:12px;background-position:left center;background-repeaT:no-repeat;}
.kontakt-gumb.mail a{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%233a2a7d'%3E%3Cpath d='M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z'/%3E%3C/svg%3E");}
.kontakt-gumb.telefon a{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%233a2a7d'%3E%3Cpath d='M511.2 387l-23.25 100.8c-3.266 14.25-15.79 24.22-30.46 24.22C205.2 512 0 306.8 0 54.5c0-14.66 9.969-27.2 24.22-30.45l100.8-23.25C139.7-2.602 154.7 5.018 160.8 18.92l46.52 108.5c5.438 12.78 1.77 27.67-8.98 36.45L144.5 207.1c33.98 69.22 90.26 125.5 159.5 159.5l44.08-53.8c8.688-10.78 23.69-14.51 36.47-8.975l108.5 46.51C506.1 357.2 514.6 372.4 511.2 387z'/%3E%3C/svg%3E");}
.kontakt-gumb.mob a{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%233a2a7d'%3E%3Cpath d='M304 0h-224c-35.35 0-64 28.65-64 64v384c0 35.35 28.65 64 64 64h224c35.35 0 64-28.65 64-64V64C368 28.65 339.3 0 304 0zM192 480c-17.75 0-32-14.25-32-32s14.25-32 32-32s32 14.25 32 32S209.8 480 192 480zM304 64v320h-224V64H304z'/%3E%3C/svg%3E");}

ul.footer-menu{margin:0;padding:0;list-style:none;display:block;text-align:right}
ul.footer-menu li{display:inline-block;padding:10px;background:none}
ul.footer-menu li a{color:#fff;text-transform:none}


@media (max-width:991px){
	.container{max-width:768px}
	.columns.four,.columns.six,.columns.three,.columns.nine{width:100%;margin:0}
	.tab-vertical-cell, .tab-vertical{display:block}
	footer, footer .text-right{text-align:center}
	.aronija-desno{background-position:top center; background-size:auto 360px;padding-top:350px}
	.content-section img{max-width:100%;max-height:100%}
	
}