/* info
--------------------------------------------------------
  Start:  4.07.2012.
  Name: Dental center Markovic; 
  Author: BozooArt, www.bozooart.com*/

/* Colors
----------------------------------------------- 

#03A8E0 = blue
#929292 = gray  (text)



/* Normalize
----------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; margin: 0; font-weight: normal; }
ol, ul { list-style: none;  }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; padding: 0; margin: 0; }
caption, th { text-align: left; }
q:before, q:after { content:''; }
hr { display: none; }
legend { display: none; }
input, textarea,  select { font-family: Arial, Helvetica, sans-serif; color: #6d6d6d;   }
img { margin: 0; padding: 0; }

a { text-decoration: none; color: #03A8E0 }
a:hover { border: none; text-decoration: none  }
a:focus { outline: none; }
.clr { clear: both; }

h2 small { font-size: 22px;   }


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

}

[data-icon]:before {
  font-family: "dcm" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "dcm" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lips:before {
  content: "\61";
}
.icon-mail:before {
  content: "\62";
}
.icon-pics:before {
  content: "\63";
}
.icon-what:before {
  content: "\64";
}
.icon-when:before {
  content: "\65";
}
.icon-where:before {
  content: "\66";
}
.icon-who:before {
  content: "\67";
}
.icon-why:before {
  content: "\68";
}
.icon-menu:before {
  content: "\69";
}
.icon-right:before {
  content: "\6d";
}
.icon-left:before {
  content: "\6c";
}
.icon-smile:before {
  content: "\6a";
}
.icon-price:before {
  content: "\6b";
}



@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  src: local('Varela'), url('font/varela.woff') format('woff');
}


/* General
----------------------------------------------- */
body { font: 16px/1.6em 'Varela', Arial, Helvetica, sans-serif; color: #a3a7a7; text-align: left; margin: 0; padding: 0;    background: #fff url(img/bg2.gif);  }
#container { width: 1024px; margin: 0 auto; padding: 0;  position: relative;  overflow: hidden; border-box: box-sizing;   }

.nav-collapse { margin-top: 38px; position: fixed; margin-left: 30px; z-index: 1000 }
.nav-collapse li { margin-bottom: 40px;  }
.nav-collapse li a { font-size: 38px; color: #a3a7a7;   }
.nav-collapse li.l0 a { font-size: 41px }
.nav-collapse li.active a,
.nav-collapse li a:focus,
.nav-collapse li a:hover { color: #03A8E0; text-decoration: none !important; border: none;  } 

  .nav-collapse #lang { position: absolute; height: 20px; margin: -73px 0 0 42px; width: 270px; padding-left: 12px; overflow: hidden; display: none  }
  .nav-collapse #lang li { float: left !important; display: inline !important }
  .nav-collapse #lang li a { width: 42px; height: 20px; margin: 0 12px 0 0;   }
  


#nav { margin-top: 38px; position: fixed; margin-left: 30px; z-index: 1000 }
#nav li a { display: block; width: 42px; text-indent: -9999em; background: url(img/nav2.png) no-repeat; height: 37px; margin-bottom: 45px;   }


  .nav #lang { position: absolute; height: 20px; margin: -37px 0 0 42px !important; width: 270px; padding-left: 12px; overflow: hidden; display: none  }
  .nav #lang li { float: left !important; display: inline !important }
  .nav #lang li a { width: 42px; height: 20px; margin: 0 12px 0 0; background: url(img/lang.png) no-repeat; display: block; float: left !important; text-indent: -9999em   }
  
  .nav #lang li#hr a { background-position: -0px -69px }
  .nav #lang li#no a { background-position: -54px -69px }
  .nav #lang li#it a { background-position: -109px -69px }
  .nav #lang li#en a { background-position: -164px -69px }
  .nav #lang li#de a { background-position: -220px -69px }
  
  .nav #lang li#hr.active a,
  .nav #lang li#hr a:hover { background-position: -0px 0px }
  .nav #lang li#no.active a,
  .nav #lang li#no a:hover { background-position: -54px 0px }
  .nav #lang li#it.active a,
  .nav #lang li#it a:hover { background-position: -109px 0px }
  .nav #lang li#en.active a,
  .nav #lang li#en a:hover { background-position: -164px 0px }
  .nav #lang li#de.active a,
  .nav #lang li#de a:hover { background-position: -220px 0px }

.nav li.l0 #lang.slide { display: block;  }



.content {   height: 765px; padding: 103px 32px 0 168px; background: #fff; margin-bottom: 500px  }
h1#logo a { margin-left: 650px; ;   display: block; width: 149px; height: 39px; background: url(img/logo3.png) no-repeat; position: fixed; top: 33px; text-indent: -9999em; z-index: 1000  }
h2 { font-size: 30px; color: #03A8E0;  margin-bottom: 30px  }

#brand { text-align: center; font-size: 700px }
#brand span { display: none;  }

#what h2 { margin-bottom: 50px;  }

#home .content { padding: 103px 32px;    }
#who .content { height: 765px  }
#who .content h2 { margin: 0 0 10px }

#hIM { background: url(img/him.png) no-repeat; width: 823px; height: 259px; position: absolute; right: 0px;  }

.darr a { background: url(img/darr.png) no-repat; width: 60px; height: 60px; text-indent: -9999em }
.darr a:hover { background-position: -60px 0 }



#services h3 { margin-bottom: 5px; }
#services h3 a { font-size: 21px; color: #03A8E0;  }
#services h3 a:hover { color: #a3a7a7; text-decoration: none;  }
#services li { margin-bottom: 40px;  }
#services li div { display: none; font-size: 16px }
#services li:first-child div { display: block; }


#why li { margin-bottom: 20px; font-size: 21px; color: #a3a7a7;   }
#why li strong { background: url(img/check-gray.png) no-repeat right 0; padding-right: 40px; font-weight: normal;  }
#why li i { position: relative; left: 5px; font-size: 15px  }
#why #lips-outline { text-align: center; font-size: 700px; margin-top: -150px;  }

#when li { font-size: 21px; margin-bottom: 20px; color: #a3a7a7;  }
#when .sub { margin-top: 40px;  }
#when .clock { font-size: 400px; position: absolute; right: 30px; margin-top: 50px;   }

#where li { font-size: 21px;  margin-bottom: 10px;   }


#photos .content {  padding: 140px 0; position: relative;  } 
  #narr a { display: block; width: 39px; height: 42px; text-indent: -9999em; background: url(img/narr.png) no-repeat; position: absolute; top: 320px; left: 924px   }
  #narr #larr a { background-position: 0 0;  }
  #narr #rarr a { background-position: 0 bottom; left: 227px; }
  #narr #larr a:hover {  background-position: right 0;   }
  #narr #rarr a:hover { background-position: right bottom  }

#slider { width: 700px; margin: 0 auto; position: relative;   }
#slider img { width: 100%; height: auto;  }


  #contact h2 { margin-bottom: 50px;  }
  #contact dt { color: #03A8E0; font-size: 26px; margin-bottom: 15px; line-height: 1.2em  }
  #contact dd { font-size: 21px; margin-bottom: 10px;  }
        #contact dd.last { margin-top: 40px;  }
  #contact dd a { color: #a3a7a7;  }
#contact dd a:hover { text-decoration: none; color: #03A8E0 }


#mirror-zrinka { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 731px; z-index: 1; margin-top: -5px;   }
#dentist-zrinka { background: url(img/zrinka.png) no-repeat; width: 213px; height: 244px; position: absolute; margin: 2px 0 0 10px; left: 725px; z-index: 2 }

#mirror-igor { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 731px; z-index: 1; margin-top: -17px;  }
#dentist-igor { background: url(img/igor-matkovic.png) no-repeat; width: 198px; height: 245px; position: absolute; margin: -13px 0 0 10px; left: 745px; z-index: 2  }

#mirror-marin { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 731px; z-index: 1; margin-top: -10px;   }
#dentist-marin { background: url(img/marin.png) no-repeat; width: 183px; height: 245px; position: absolute; margin: 1px 0 0 10px; left: 746px; z-index: 2 }

#mirror-petra { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 731px; z-index: 1; margin-top: -5px;   }
#dentist-petra { background: url(img/petra.png) no-repeat; width: 210px; height: 247px; position: absolute; margin: 4px 0 0 19px; left: 741px; z-index: 2 }
#content-petra h2 { padding-top: 115px }

#mirror-irena { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 731px; z-index: 1; margin-top: 4px;   }
#dentist-irena { background: url(img/irena.png) no-repeat; width: 183px; height: 250px; position: absolute; margin: 6px 0 0 19px; left: 740px; z-index: 2 }
#content-irena h2 { padding-top: 115px }

/* petra mijat */
#mirror-katarina { width: 823px; height: 250px; background: url(img/mirror-gray.png) no-repeat; position: absolute; left: 728px; z-index: 1; margin-top: -6px;   } 
#dentist-katarina { background: url(img/petra-mijat.png) no-repeat; width: 178px; height: 237px; position: absolute; margin: 8px 0 0 19px; left: 740px; z-index: 2 }
#content-katarina h2 { padding-top: 55px;  }

#map { margin-top: 30px }
#map {
  width: 700px;
  margin: 50px 0 100px;
}
#map iframe{
  width: 100%;
  display: block;
  pointer-events: none;
  position: relative; /* IE needs a position other than static */
}
#map iframe.clicked{
  pointer-events: auto;
}

.tipsy { font-size: 12px; position: absolute; padding: 5px; z-index: 100000; margin-left: 5px }
.tipsy-inner { background: #03a8df; color: #fff; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } 
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #03a8df; }
.tipsy-arrow-w { border-right-color: #03a8df; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }


#price-list { width: 600px; margin: 50px auto 0  }
#price-list th { color: #03A8E0; padding: 10px 20px; font-size: 21px;  }
#price-list tr { border-bottom: 1px solid #f2f2f2 }
#price-list td { padding: 5px 20px; font-size: 14px;   }
#price-list td.value { text-align: right;  }


.fb { margin-top: 40px }
.fb a { display: block; background: url(img/facebook.png) no-repeat; padding: 4px 0 4px 50px; color: #929292; width: 120px  }
.fb a:hover { color: #03A8E0; text-decoration: none; background-position: 0 -41px;  }

#content-zrinka,
#content-marin,
#content-igor,
#content-petra,
#content-katarina { padding-top: 55px; height: 280px;  }
.who-text { padding-right: 300px; line-height: 1.4em }

#apps { margin-top: 40px;  }
#apps ul:after { clear: both; content: ''; display: block;  }
#apps li a { display: block; width: 135px; height: 40px; background: url(img/apps-icons.png); text-indent: -9999em; float: left;   }
#apps li.google-play a { margin-left: 40px; background-position: -135px 0;  }
#apps li.app-store a:hover { background-position: 0px -40px  }
#apps li.google-play a:hover { background-position: -135px -40px  }

.nav-holder { position: fixed; z-index: 100;  background: rgba(256,256,256,0); height: 100%;  }
#nav-trigger { display: none; font-size: 40px;  }
#nav-trigger span { background: #fff no-repeat 10px 0; display: block; padding: 10px; color: #000; cursor: pointer; text-transform: uppercase; margin-bottom: 10px;  } 
#nav-mobile { display: none; padding: 0 0 0 15px; margin: 0  }
#nav-mobile  ul { display: none;  z-index: 100; width: 100%;  margin: 0 auto !important; padding: 0 !important  }
#nav-mobile li a { margin-bottom: 25px;  }
#nav-mobile .lang li { display: inline; float: left; width: 25%;  }
.nav li.l0 a { margin-left: -5px  }

.email { position: absolute; right: 0 ; font-size: 400px; margin-top: -100px; overflow: hidden;  }
.email i { position: relative; right: -20% }


.owl-dots { text-align: center; margin-top: 40px; position: relative; z-index: 100;  }
.owl-dots .owl-dot { text-align: center;  display: inline-block;  zoom: 1; margin: 0 auto;  }
.owl-dots .owl-dot.active span, 
.owl-dots .owl-dot:hover span {  background: #03A8E0; }

.owl-dots .owl-dot span { margin: 0 auto; 
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    background: #a3a7a7;
    display: block;
    -webkit-backface-visibility: visible;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.owl-controls {  width: 100%;  color: #fff; font-size: 45px; }
.owl-nav .owl-prev { left: 50px;  position: absolute;  }
.owl-nav .owl-next { right: 70px;  position: absolute;  }
.owl-controls i:hover { color: #00;  }

.owl-nav div {  top: 40%;  }
.owl-nav .owl-prev { left: 10px;  }
.owl-nav .owl-next {  right: 10px;  }





/* responsive */



@media(max-width: 1400px) { 

  #container { width: 1000px }

}

@media(max-width: 992px) { 



h2 { font-size: 40px; line-height: 1.1em;  }


.nav-collapse { display: none;  }
#nav-trigger {  display: block; }
#nav-mobile { display: block; }

#who h2 { line-height: 1.1em; font-size: 40px;   }
#who h2 small { display: block; }
.who-text { padding: 0; line-height: 1.6em;   }

.cont { padding: 0 !important; height: auto !important; margin-bottom: 50px;  }

.mirror-holder { position: relative;  }
.dentist  { left: -16px !important; margin: 0; top: 6px;  }
.mirror {  width: 100%;  position: relative !important; left: 0 !important; margin: 0 0 30px !important;  }

#who .content { height: auto;  }

#content-katarina h2,
#content-petra h2 { padding: 0; margin: 0;  }

#dentist-zrinka.dentist {  left: 3px !important; margin: 0; top: 7px; }
#dentist-igor.dentist { left: 26px !important; top: 17px;  }
#dentist-katarina.dentist { left: 12px !important; top: 6px;  }
#dentist-petra.dentist { left: 10px !important; top: 4px;  }

#dentist-igor.dentist { left: 15px !important; top: 17px !important;  }

#map { width: 100%; height: 300px;  }

#when .clock { position: relative; font-size: 300px; margin: 0 auto; text-align: center; right: auto;     }


#slider { width: auto; margin: 0 auto; position: relative;  }
#slider img {  height: auto; max-width: 100%;   }

.email { position: static; margin: 0; text-align: center; font-size: 300px  }
.email i { right: 0;  }

h1#logo a { margin-left: 0px; top: 10px;  right: 10px;  }



}


@media(max-width: 768px) { 

  #container { width: 100% !important;   }



.content { height: auto; padding: 60px 30px; margin-bottom: 250px; width: 100%; box-sizing: border-box;   }

#why #lips-outline { margin: 0 !important;  width: 100% !important; position: static;  background-size: cover !important;  }

.nav-collapse li { margin-bottom: 20px;  }

#brand,
#why #lips-outline { font-size: 300px;   }

.nav #lang  { margin-left: 50px !important;  }

.nav-collapse li a { font-size: 30px;  }

#price-list { width: 100%;  }

}


@media(max-width: 480px) {

  #container { width: 100% !important;   }

h2,
#who h2,
#contact h2  { font-size: 30px;  }

.owl-nav { display: none;  }

#why li,
#when li,
#where li,
#services li div,
h2 small,
#contact dd { font-size: 20px;  }

.content { padding: 60px 15px !important; }



#apps li a { float: none; margin: 0 0 10px !important;  }

  }

@media(max-width: 360px) {



  }