@charset "UTF-8";

/*

  ------------------------------------------------------
  CSS DOKUMENT
  ------------------------------------------------------
  Autor:	Christian Medica
  Datum:	2019.
  ------------------------------------------------------
  
*/






/* ############################# */
/* #####  VANJSKI SADRŽAJI  #### */
/* ############################# */

/*
  font OpenSans - glavni za cijeli web
  font-family: 'Open Sans', sans-serif;
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

/*
  font Courgette - rukopis
  font-family: 'Courgette', cursive;
*/
@import url(https://fonts.googleapis.com/css?family=Courgette);









/* ############################ */
/* #####  TIJELO STRANICE  #### */
/* ############################ */

/* tijelo */
body {
	color:#333;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height:1.2em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#FFF;
}
@media screen and (min-width: 1024px) and (max-width: 1400px) {
	body {
		font-size: 15px;
	}
}
/*kraj @media screen od 1024px do 1400px*/
@media screen and (min-width: 601px) and (max-width: 1023px) {
	body {
		font-size: 14px;
	}
}
/*kraj @media screen od 601px do 1023px*/
@media screen and (max-width: 600px) {
	body {
		font-size: 12px;
	}
}
/*kraj @media screen do 600px*/



/* slike */
img { border:0; vertical-align:top;}

/* linkovi za sve */
a:link		{ text-decoration: underline;	color: #00A6EA;		}
a:visited	{ text-decoration: underline;	color: #00A6EA;		}
a:hover		{ text-decoration: none;		color: #00A6EA;		}
a:active	{ text-decoration: none;		color: #00A6EA;		}



/* odjeljci */
header,
footer,
main,
section {
	width:100%;
	box-sizing:border-box;
	float:left;
	padding:0px;
	/*background-color:#BCBCBC;*/
	text-align: center;
}
div, 
button {
	box-sizing:border-box;
}

input[type=text],
input[type=password],
select,
textarea {
	width:100%;
	box-sizing:border-box;
	float:left;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	background-color:#FFF;
}
@media screen and (max-width: 600px) {
input[type=text],
input[type=password],
select,
textarea {
	font-size: 13px;
}
}
/*kraj @media screen do 600px*/
select, button { cursor:pointer; }
button {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	text-align:center;
}


/* hr linija */
hr {
	border:0;
	border-bottom:1px solid rgba(19,153,213,.2);
	margin:30px 0;
}
@media screen and (max-width: 600px) {
hr {
	margin:15px 0;
}
}
/*kraj @media screen do 600px*/



/* kontejner */
div.kontejner {
	width:100%;
	max-width:1370px;
	margin:0 auto;
	box-sizing:border-box;
	display:inline-block;
	text-align:left;
	vertical-align:top;
	padding:0;
}
@media screen and (min-width: 1024px) and (max-width: 1400px) {
	div.kontejner {
		max-width:1200px;
		padding:0 20px;
	}
}
/*kraj @media screen od 1024px do 1400px*/
@media screen and (min-width: 601px) and (max-width: 1023px) {
	div.kontejner {
		padding:0 20px;
	}
}
/*kraj @media screen od 601px do 1023px*/
@media screen and (max-width: 600px) {
	div.kontejner {
		padding:0 30px;
	}
}
/*kraj @media screen do 600px*/










/* ################################# */
/* #####  NASLOVI I PODNASLOVI  #### */
/* ################################# */

h1 { 
	font-family: 'Courgette', cursive;
    font-size: 50px;
    font-weight: normal;
    line-height: 1.2em;
    color: rgba(19,153,213,1);
    margin:0;
    padding:0;
	text-align: center;
	box-sizing:border-box;
}
@media screen and (max-width: 1023px) {
h1 { 
    font-size: 40px;
    line-height: 1.2em;
}
}
/*kraj @media screen do 1023px*/
h2 {
	font-family: 'Courgette', cursive;
	font-size:24px; 
	font-weight: normal; 
	line-height:1.3em; 
	color: rgba(19,153,213,1);
	margin:0;
	padding:0;
	text-transform: none;
	text-align:center;
	box-sizing:border-box;
}
@media screen and (max-width: 600px) {
h2 {
	font-size:19px; 
	line-height:1.3em; 
}
}
/*kraj @media screen do 600px*/

h3 {
	font-family: 'Courgette', cursive;
	font-weight: normal; 
	line-height:1.2em; 
	color:rgba(19,153,213,1);
	text-transform: none;
	margin:0;
	padding:0;
	
	text-align: left;
	font-size:36px;
}









/* ############################### */
/* #####  EFEKTI I ANIMACIJE  #### */
/* ############################### */
:hover { 
	-webkit-transition:all 100ms ease-in; 
	-o-transition:all 100ms ease-in; 
	-moz-transition:all 100ms ease-in; 
}

@-webkit-keyframes fade-out {
	0% { opacity: 1; -webkit-transform: scale(1);}
	50% {opacity: 0.5; -webkit-transform: scale(1.5);}
	100% {opacity: 0; -webkit-transform: scale(.1); }
}
	
@-moz-keyframes fade-out {
	0% { opacity: 1; -moz-transform: scale(1);}
	50% {opacity: 0.5; -moz-transform: scale(1.5);}
	100% {opacity: 0; -moz-transform: scale(.1); }
}
	
@keyframes fade-out {
	0% { opacity: 1; transform: scale(1);}
	50% {opacity: 0.5; transform: scale(1.5);}
	100% {opacity: 0; transform: scale(.1); }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
    box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
      box-shadow: 0 0 0 10px rgba(0,0,0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
      box-shadow: 0 0 0 0 rgba(0,0,0, 0);
  }
}














/* #################### */
/* #####  SADRŽAJ  #### */
/* #################### */

div.logo {
  position: fixed;
  top: 30%;
  left: 50%;
  width: 200px;
  height: auto;
  margin-left: -100px;
}











/* ################### */
/* #####  OSTALO  #### */
/* ################### */

/* JS TOOLTIP */
.tooltip {
	position:absolute;
	z-index:200000;
	display:block;
	font-size:15px;
	font-style:normal;
	font-weight: normal;
	line-height:1.42857143;
	text-align:left;
	text-align:start;
	text-decoration:none;
	text-shadow:none;
	text-transform:none;
	letter-spacing:normal;
	word-break:normal;
	word-spacing:normal;
	word-wrap:normal;
	white-space:normal;
	filter:alpha(opacity=0);
	opacity:0;
	line-break:auto;
}
.tooltip.in{filter:alpha(opacity=90);opacity:.9}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip-inner{max-width:250px;padding:10px 10px;color:#fff;text-align:center;background-color:#000;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}
.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}
.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}
.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}
.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}



/* PRIKAZ PLACEHOLDER-A U POLJIMA ZA TEKST */
::-webkit-input-placeholder { /* WebKit browsers */
    color:rgba(255,255,255,.8);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:rgba(255,255,255,.8);
   opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:rgba(255,255,255,.8);
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:rgba(255,255,255,.8);
}