/* ------ BASIC colors
blue-dark = #12455e;
blue-basic = #03a8e1;
59aab2
gray = #333;
---------------------------*/


/* -------------------------
reset styles
---------------------------*/

html, body, div, h1, h2, h3, h4, h5, h6,
p, ol, ul, li, hr, th, td, video,
nav, contentwrapper {
	margin: 0;
	padding: 0;
	border: 0; 
}
/* ------   viewport for devices   --------*/
@-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; }


body {
	width:100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	font-weight:400;
	color: #12455e;
	text-align:left;
}
.bkgd-image1 {
	display:block;
	position:fixed;
	z-index:-1;
	width:100%;
	max-width:2200px;
	overflow:hidden;
}
.bkgd-image2 {
	display:none;
}
.bkgd-image3 {
	display:none;
}

.bkgd-image1 img, .bkgd-image2 img, .bkgd-image3 img {
	max-width:100%;
	height:auto;
	top:0;
	right:0;	
}
.pagewrapper {
	width:100%;
	position:relative;
	
}
.header {
	height:96px;
	background-color:#FFF;
	text-align:center;
	box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.3);
}
.logo {
	width:160px;
	padding-top:16px;	
	margin:auto;
}
.logo img {
	width:100%;
}
.contentwrapper {
	width:80%;
	max-width:1920px;
	min-height: 50vh;
	margin:auto;
	padding-bottom:220px;
	padding-top:40px;
}
.contentwrapper:after{
    clear: both;
    content: "";
    display: block;
}
.pagetitle {
	width:80%;
	float:left;
}
.pagetitle:after{
    clear: both;
    content: "";
    display: block;
}
.half {
	width:45%;
	margin-right:5%;
}
.half-right {
	width:45%;
	padding-top:100px;
	margin-left:5%;
}
.flt-left {
	float:left;
}
.flt-right {
	float:right;
}
.flt-left:after{
    clear: both;
    content: "";
    display: block;
}
.form-wrapper {
	background-color:#12455e;
	padding:20px 24px 76px 24px;
	border-radius: 8px;
}
.form-wrapper p {
	color:#fff;
	font-size:14px;
}
.form-column {
	width:auto;
}
.footer {
	width:100%;
}
.footer-content {
	width:100%;
	background-color:#13465e;
}
.footer-images {
	width:80%;
	max-width:1920px;
	margin:auto;
}
.ft-img {
	width:20%;
	margin-top:-90px;
	margin-bottom:50px;
	display:block;
	float:left;
	font-size:16px;
	font-weight:700;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
}
.ft-img-round {
	width:55%;
	margin:auto;
	border-radius:50%;
	border: #13465e solid 24px;
}
.ft-img p {
	width:70%;
	margin:-16px 15% 0 15%;
}
.footer-images:after{
    clear: both;
    content: "";
    display: block;
}
.footer-info {
	display:block;
	width:100%;
	color:#fff;
	font-size:13px;
	text-align:center;
	text-transform:uppercase;
	padding-bottom:20px;
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
.bkgd-image1 {
	display:none;
}
.bkgd-image3 {
	display:none;
}
.bkgd-image2 {
	display:block;
	position:fixed;
	z-index:-2;
	width:100%;
	max-width:1024px;
	overflow:hidden;
}
.header {
	height:80px;
}
.logo {
	width:139px;
	padding-top:12px;	
}
.contentwrapper {
	width:90%;
	margin-left:5%;
	margin-right:5%;
}
.pagetitle {
	width:60%;
	padding-top:80px;
}
.half {
	width:60%;
	margin:0;
}
.half-right {
	width:60%;
	float:left;
	margin:0;
}

.footer-images {
	width:100%;
}
.ft-img-round {
	width:55%;
	margin:auto;
	border-radius:50%;
	border: #13465e solid 16px;
}
.ft-img p {
	width:70%;
	margin:-16px 15% 0 15%;
}
}
@media screen and (max-width: 768px) {
.bkgd-image1 {
	display:none;
}
.bkgd-image2 {
	display:none;
}
.bkgd-image3{
	display:block;
	position:fixed;
	z-index:-3;
	width:100%;
	max-width:768px;
	overflow:hidden;
}
.header {
	height:60px;
}
.logo {
	width:99px;
	padding-top:10px;	
}
.contentwrapper {
	width:90%;
	margin-left:5%;
	margin-right:5%;
}
.pagetitle {
	width:100%;
	padding-top:150px;
}
.half {
	width:100%;
}

.half-right {
	width:100%;	
}

.footer-images {
	width:70%;
}
.ft-img {
	width:80%;
	margin-top:-90px;
	margin-bottom:50px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	float:none;
}
.ft-img-round {
	width:55%;
	margin:auto;
	border-radius:50%;
	border: #13465e solid 20px;
}
.ft-img p {
	width:70%;
	margin:-16px 15% 0 15%;
	padding-bottom:50px;
}
}

h1 {
	font-size:2.2em;
	font-weight:700;
	line-height:1em;
	padding-bottom:12px;
	letter-spacing:-0.05em;
}
h1 span {
	font-weight:400;
}
h2 {
	font-size:1.9em;
	font-weight:700;
	font-style:italic;
	padding-bottom:24px;
	letter-spacing:-0.05em;
}
h3 {
	font-size:1em;
	font-weight:700;
	color:#fff;
	letter-spacing:-0.02em;
	text-transform:uppercase;
}
.inline-border {
	display:inline-block;
	background-color:#59aab2;
	padding:8px 12px 8px 10px;
	border-radius: 8px;
	margin-bottom:16px;
}
.right-info-title {
	font-size:1.6em;
	font-weight:700;
	font-style:normal;
	color:#59aab2;
	text-transform:uppercase;
	padding-bottom:20px;
	letter-spacing:-0.05em;
}

.with-background {
	color:#FFF;
	background-color:#59aab2;
	padding:24px;
	border-radius: 8px;
	font-size:16px;
	margin-bottom:20px;
}
.with-background a {
	color:#FFF;
	font-weight:700;
	text-decoration:none;
}
.pagetitle p {
	padding-bottom:16px;
}
.zvezdica p{
	font-size:14px;
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
h1 {
	font-size:2.5em;
}
h2 {
	font-size:1.5em;
}
h3 {
	font-size:0.9em;
}
}
@media screen and (max-width: 768px) {
h1 {
	font-size:2em;
	width:75%;
}
h2 {
	font-size:1.3em;
}
h3 {
	font-size:0.8em;
}
}



.data-insert {
	width:100%;
	position:relative; 
	float:left;
	margin:4px 0 4px 0;
	display:inline-block;
}
.data-insert input{
	font-size:16px;
	width:94%;
	display:inline-block;
	border:1px solid #333333;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	line-height:16px;
	border-radius: 8px;
	-webkit-transition:0.2s ease all;
	-moz-transition:0.2s ease all; 
	-ms-transition:0.2s ease all; 
	-o-transition:0.2s ease all; 
	transition:0.2s ease all; 
	box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.3);
}
.data-insert input[type=text] {
	font-weight: 300;
    padding: 6px 3%;
	color: #333333;	
}
.data-insert input:focus { 
	outline:none;
	border:1px solid #ec008c;
}
/* comment ======================================= */
textarea{
	outline:none;
	resize:none;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	width:94%;
	height:120px;
	padding: 10px 3%;
	display:inline-block;
	border-radius:8px;
	border:1px solid #333333;
	box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.3);
}
textarea:focus{ 
	outline:none;
	border:1px solid #ec008c;
}
.data-insert input[type="submit"] {
	width:100%;
	height:auto;
	background-image:none;
	padding:15px;
	text-transform:uppercase;
	font-weight:300;
	font-size:16px;
	line-height:16px;
	letter-spacing:0.05em;
	display:block;
	color:#FFF;
	background-color:#59aab2;
	border:1px solid #59aab2;
	border-radius: 5px;
	margin:auto;
	box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.3);
	cursor: pointer;
}
.data-insert input[type="submit"]:hover {
	background-color:#FFF;
	color: #59aab2;
}


 /*=========  radio button   =============00*/
/* Customize the label (the container) */

.gumb-okvir {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  color:#FFF;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.gumb-okvir input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 3px;
  border:1px solid #333333;
  box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.3);
}

/* On mouse-over, add a grey background color */
.gumb-okvir:hover input ~ .checkmark {
  background-color: #59aab2;
  
  
}

/* When the checkbox is checked, add a blue background */
.gumb-okvir input:checked ~ .checkmark {
  background-color: #fff;
  border-radius: 3px;
  border:1px solid #59aab2;
  
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.gumb-okvir input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.gumb-okvir .checkmark:after {
  left: 8px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid #59aab2;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}