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;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1160px;
  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: 85%;
    padding: 0; }
}

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

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	color: #333d4b;
	/*background: url(../images/cover.jpg) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100%;*/
	background: #fff;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
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; }
h3 { font-size: 3.0rem; line-height: 1.3;  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; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.2rem; font-weight: 400;}
  h6 { font-size: 1.5rem; }
}
h5 span {
	color: #82b63a;
	font-weight: 600;
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }




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

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

.clear {
	clear: both;
}
  
/* =Nav
-------------------------------------------------------------- */
header {
	background: #fff;
	height: 115px;
	width: 100%;
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	z-index: 990;
}
.navigation {
	background: #fff;
}

nav {
  margin-bottom: 30px; }

nav#nav-main {
	margin-top: 25px;
  padding: 10px 0;
}
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;
    padding: 0 5px; }

  nav#nav-main a {
    display: block;
    color: #333d4b;
    padding: 5px;
	text-decoration: none;
	}
    nav#nav-main a:hover {
		color: #8dc63f;
	}

.mainlogo {
	margin-top: 24px;
	width: 200px !important;
}
.button_container {
	display: none;
	position: fixed;
	top: 40px;
	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: #8dc63f;
}
.button_container.active .middle {
  opacity: 0;
  background: #8dc63f;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #8dc63f;
}
.button_container span {
  background: #8dc63f;
  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;
}

.overlay {
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 998;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: 300;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 7);
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #333d4b;
  text-decoration: none;
  overflow: hidden;
}
.overlay ul li a:hover {
	color: #8dc63f;
}
	
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 1px;
  background: #8dc63f;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}


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

  nav#nav-main {
    display: none; }
}

/* image gallery
-------------------------------------------------------------- */
.gallerywrap {
   overflow: hidden;
   max-width: 1920px;
   margin: 0 auto;
}
.box {
   float: left;
   position: relative;
   width: 12.5%;
}
.box img {
   width: 100%;
   display: block;
}
.box img.hoverimage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.box img.plusimage {
	/*
	width: 31px;
	height: 31px;
	*/
	width: 21px;
	height: 21px;
	position: absolute;
	top: 46%;
	left: 45%;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
	  width: 50%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
	  width: 33.33333%;
   }
}

@media only screen and (max-width : 800px) and (min-width : 651px) {
   /* Medium desktop: 4 tiles */
   .box {
	  width: 25%;
   }
}
@media only screen and (max-width : 1368px) and (min-width : 801px) {
   /* Medium desktop: 4 tiles */
   .box {
	  width: 16.666666666667%;
   }
}
@media only screen and (min-width : 1369px) {
	.box {
	  width: 12.5%;
   }
}

@media screen and (min-width:1150px) and (max-width:1300px){
    nav#nav-main li { padding: 0 }
}

/* Responsive google maps
-------------------------------------------------------------- */
.google-maps {
	position: relative;
	padding-bottom: 70%; 
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

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

.empty {
	width: 100%;
	height:auto;
	padding-top: 115px;
}
.whitesection {
	background: #fff;
	width: 100%;
	padding: 70px 0;
}
.greysection {
	background: #e1e1e1;
	width: 100%;
	padding: 40px 0;
}
.whitesection h2 {
	text-align: left;
	color: #8dc63f;
	font-style: italic;
	
}
.whitesection p.firstparagraph {
	margin-top: 10px;
}

.divider {
	height: 246px;
	text-align: center;
	color: #fff;
}
.italic, .divider h3{
	font-style: italic;
}
.divider h3{text-shadow: 0 0 8px #555;}
.divider.pedikura {
	background-image: url('../images/pedikura-main_.jpg');
	background-position:  center;
	background-repeat: no-repeat;
	background-color: #1c61a1;
	background-size:cover;
}
.divider.manikura {
	background-image: url('../images/slika2.webp');
	background-position: center center;
	background-size:cover;
	background-repeat: no-repeat;
	background-color: #f779b0;
}
.divider.masaza {
	background-image: url('../images/masaza_new.jpg');
	background-position: center center;
	background-size:cover;
	background-repeat: no-repeat;
	background-color: #333e4d;
}
.divider.depilacija {
	background-image: url('../images/depilacija.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #a386b3;
}

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 246px;
}
.maintitle {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	width: 100%;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 32px black;
}

.img-responsive {
	display: block;
	width: 100%;
}
.pbottom {
	padding-bottom: 20px;
}

.titleitalic {
	font-size: 1.6em;
	font-style: italic;
	font-weight: 300;
}
footer {
	padding: 40px 0;
	background: #333;
	width: 100%;
	color: #fff;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.sliderimage {
	margin: 0 auto;
	width: 100px;
}
.pricetitle {
	font-size: 1.2em;
	padding: 5px 0 10px;
}
.sliderparagraph {
	
}
.plr{
	padding: 0 5% !important;
	display: inline-block;
}

.bttn, .bttn:visited {
	text-align: center;
	padding: 5px 20px;
	color: #000;
	border: 1px solid #000;
	text-decoration: none;
	display: inline-block !important;
	width: auto !important;
	font-size: 0.8em;
	margin-top: 15px;
	opacity: .25;
}
.bttn:hover, .bttn:active {
	color: #82b63a;
	border: 1px solid #82b63a;
	opacity: 1;
}

.strong {
	font-weight: 600;
}
.cjenikwrapper.crveni {
	width: 100%;
	background: url('../images/cjenik-crveni.jpg') top center no-repeat #2c3946;
	padding: 58px 0;
	height: auto;
	background-size:cover;
}
.sivibackground{position:Relative}
.sivibackground .container{z-index:10}
.sivibackground::before{
    display:block;
    content:'';
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(100,100,100,0.6);
}
.cjenikwrapper.sivi {
	width: 100%;
	background: url('../images/cjenik-sivi.jpg') top center no-repeat #2c3946;
	padding: 58px 0;
	height: auto;
	background-size:cover;
}
.cjenikwrapper {
	width: 100%;
	background: url('../images/cjenik-background.jpg') top center no-repeat #2c3946;
	background-size:cover;
	padding: 58px 0;
	height:auto;
}
.cjenikwrapper span, .cjenikwrapper h2{display:inline-block;margin:0 auto;font-size:4.8rem;line-height:1.3;letter-spacing:-.1rem;color:#fff;font-style:italic;font-weight:300;}

a.cjenikbutton:link, a.cjenikbutton:visited {
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border: 1px solid #fff;
}
a.cjenikbutton:hover, a.cjenikbutton:active {
	color: #82b63a;
	border: 1px solid #82b63a;
}
.cjenikbutton {
	margin: 0 auto;
	
}
.cjenikbutton span {
	display: table;
	vertical-align: middle;
}
.cjenikbutton span .arrows {
	display: table-cell;
	vertical-align: middle;
	padding-left: 3px;
}

.desktopcover {
	display: none;
}
.mobilecover {
	display: block;
}

/* 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.
*/


/* 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;
	}
	.desktopcover {
		display: block;
	}
	.mobilecover {
		display: none;
	}
}

/* Larger than tablet */
@media (min-width: 750px) {
	h3 {
		font-size: 4.8em;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/*dodani custom CSS*/
.hidd{display:none;}
.bold{font-weight:600}
.margin20-0{margin:20px 0;}
.mtop80{margin-top:80px;margin-bottom:30px;}
.mtop50{margin-top:50px;}
.saznaj-button{border:1px solid #82b63a;color:#82b63a;cursor:pointer;padding:12px 24px;margin:30px auto; display:inline-block;min-width:130px;}
.toggle-cilj{cursor:pointer}
.napomena{border:1px solid #82b63a;color:#82b63a;}
.saznaj-button:hover{border:1px solid #000;color:#000;transition: color 0.5s ease, border 0.5s ease;}
.padding30{padding:10px 30px;}
.pt16{padding-top:26px;}
.margin20{margin:20px;}
i{font-style:italic;}
h5 span.toggle-cilj{display: block;border: 1px solid #aaa;padding: 10px 20px;background-image:url(/images/sljedeci.svg);background-repeat: no-repeat;background-position: 99% center;background-size: 12px;}
h5 span.toggle-cilj.aktivan, h5 span.toggle-cilj:hover{color:#fff;background-color:#82b63a;background-image:url(/images/sljedeci_white.svg);transition: color 0.5s ease, background-color 0.5s ease}
.tabl2 small{font-size:90%; color:#8dc63f; font-style:italic;}
.tabl2{width: 100%;border: 1px solid #aaa;border-top:none;}
.tabl2 td{padding:5px;}
.tabl2 th{padding:15px 5px;}
.tabl2 tbody tr td{text-align:center;}
.tabl2 thead th:first-child, .tabl2 tbody tr td:first-child{text-align:left;padding-left:20px;}
.tabl2 thead tr, .tabl2 tbody tr:nth-child(even){background:#f8f8f8}
.tabl2 td{width:140px}
.tabl2 td:first-child{width:auto;}
.gal-slika{opacity:0.41;transition:opacity 0.5s ease}
.gal-slika:hover{opacity:1;transition:opacity 0.5s ease}
.gallerywrap .box{background:#000}
.mob h4, .fix h4{background: url(/images/mobile.svg) left center no-repeat;background-size: 6%;display: inline-block;padding-left: 40px;margin-bottom:20px;}
.fix h4{background-image:url(/images/phone.svg);}

.divider.akademija{background-image:url('https://akademija.derma-ped.hr/images/pedikura.jpg');
    background-position: bottom center;
	background-repeat: no-repeat;
	background-color: #1c61a1;
	background-size:cover;
}
.akademija h5{margin-top:0}
.akademija img{max-width:100%;max-height:100%;}
.akademija p{margin:5px 0}
a.akademija-btn{display:block;text-align:center;width:100%;padding:15px 0; border:1px solid #82b63a;margin-top:20px;color:#82b63a;text-decoration:none;}
.akademija ul{list-style:disc;margin-left:20px;}
.akademija .columns{float:none;display:table-cell;vertical-align:middle;height:100%;padding:0 15px;}
.social-icon{max-width:32px;max-height:32px}
a:has(.social-icon){display:inline-block;margin-right:10px;padding:3px;min-width:32px;text-align:center;}

.show_mobile{display:none}
@media screen and (max-width:550px){
    .show_mobile{display:block}
    .hide_mobile{display:none}
}
@media screen and (max-width:540px){
    .opis .padding30{padding:0;}
    h5 span.toggle-cilj{background-position:95%, center;}
}
@media screen and (max-width:620px){
    div.row.tablica{overflow-x:auto;border-right:1px solid #aaa;border-left:1px solid #aaa;}
    .tabl2{min-width:490px;border-left:none;border-right:none;}
    .tabl2 td,.tabl2 td:first-child{width:auto;}
}
@media screen and (max-width:800px){
    .tabl2 td{width:100px}
    .tabl2 td:first-child{width:auto;}
}

@media screen and (max-width:1200px){
    .akademija h5{margin-top:40px}
    .akademija .columns{float:left;display:block;width:100%;}
}
@media screen and (min-width:1130px){
    .tabl2 td:first-child{min-width:540px;}
}