@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* common variavle start */
:root {
    --font-main: "Open Sans", sans-serif;
    --theme-color:#9E005D;
    --dark-comman:#F2F2F2;
    --devider-color:#EFEFEF;
    --color-gray:#B5B5B5;
    --color-ff:#fff;
    --color-00:#000;
}
/* common variavle end */

/* common css start  */
*{box-sizing: border-box; font-family: var(--font-main); list-style: none;text-decoration: none;margin: 0; padding: 0;}
body{position:relative; font-size: 16px; line-height: 32px; color: var(--dark-bg); font-weight: 400;}
h1{font-size: 18px;}
p{margin-bottom: 12px;}
p:last-child{margin-bottom: 0;}
a{transition: .5s ease; color: var(--theme-color);}
a:hover { color: var(--color-00);}
img{max-width: 100%;}

.wrapper { padding: 30px 0;}
/* common css end  */


/* header styling start */

/* header logo styling start */
header section { display: flex; align-items: stretch;}
header section > * { max-height: 448px;}
header section > a { background-color: var(--dark-comman); padding: 30px 27px; display: flex; max-width: 400px; flex-shrink: 0;}
/* header logo styling end */

/* header banner styling start */
header section aside figure { height: 100%; overflow: hidden;}
header section aside figure img { height: 100%; object-fit: cover; display: block;}
/* header banner styling end */

header section article{width: 100%;}
header section article nav{width: 100%;}

/* header styling end */


/* product styling start */

/* product boxstyling start */
.featured_projects_content { display: flex; flex-wrap: wrap; justify-content: space-between;}
.featured_projects_content article { position: relative; max-width: 400px; max-height: 400px; width: 100%; overflow: hidden;}

.featured_projects_content article figure a { height: 100%; display: block;}
.featured_projects_content article figure a::before { 
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    max-height: 170px;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .2) 40%, #000000 100%);
    filter: blur(3px);
}
.featured_projects_content article figure a h1 { position: absolute; z-index: 9; bottom: 0; color: var(--color-ff); line-height: 26px; text-align: center; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 28px; transition: .3s all; margin-bottom: 10px; font-weight: 700;}
.featured_projects_content article figure a:hover h1 { bottom: 50%; transform: translate(-50%, 50%); margin-bottom: 0;}
.featured_projects_content article figure a:hover::before { background: rgba(0, 0, 0, .7); max-height: 100%;}
.featured_projects_content article figure { height: 100%;}
.featured_projects_content article figure img { height: 100%; width: 100%; object-fit: cover;}
/* product box styling end */

/* first product links styling start */
.main_navigation_content { border: 1px solid var(--theme-color); /*height: 100%;*/}
.main_navigation_content nav { padding: 20px 0;}
.main_navigation_content a.active { color: var(--theme-color);}
.main_navigation_content li { position: relative; padding: 4px 0;}
.main_navigation_content li a { color: var(--color-00); width: 100%; padding: 0 28px 9px 28px; border-bottom: 1px solid var(--devider-color); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; line-height: 1.4; transition: .3s all; font-size: 18px;}
.main_navigation_content li:last-child a { border-bottom: unset; margin-bottom: 0; padding-bottom: 0;}
.main_navigation_content li a svg { height: 15px; fill: var(--color-gray); }
.main_navigation_content li:hover a { color: var(--theme-color);}
.main_navigation_content li:hover a svg { transition: .3s all;}
.main_navigation_content li:hover a svg { fill: var(--theme-color);}
/* first product links styling start */

/* company data styling start */
.company_data_content { border-bottom: 2px solid var(--theme-color); background-color: var(--dark-comman); padding: 30px 25px 30px 25px; height: 100%;}
/* .company_data_content::before { display: none;} */
.company_data_content ul li,
.company_data_content ul li * { font-size: 18px;}
.company_data_content ul li { font-weight: 600; margin-bottom: 20px; position: relative; display: flex; justify-content: start; align-items: start;}
.company_data_content ul li strong { font-weight: 700;}
.company_data_content p { display: inline-block; padding-right: 10px; margin-bottom: 20px;}
.company_data_content p a { color: var(--color-00); font-weight: 300;}
.company_data_content p::before { display: none;}
.company_data_content ul li:last-child { margin-bottom: 0;}
.company_data_content ul li { position: relative; padding-left: 20px; white-space: nowrap;}
.company_data_content ul li::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--theme-color);
    position: absolute;
    margin-right: 10px;
    top: 13px;
    left: 0;
}
.company_data_content ul li a { margin-left: 3px; color: var(--color-00);}
.company_data_content a { transition: .3s all;}
.company_data_content a:hover { color: var(--theme-color);}
/* company data styling end */

/* product styling end */

/* footer styling start */
footer { background-color: var(--dark-comman); padding: 14px 0;}
footer section { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 30px;}
footer section > * { margin: 10px 0;}
footer section a { font-weight: 600;}
/* footer styling end */



/* inner page header css start */
.innerpage_content header section { gap: 15px;}
.innerpage_content header section > a { flex-shrink: 0; max-width: 285px;}
.innerpage_content .main_navigation_content nav { padding: 13px 0;}
.innerpage_content .main_navigation_content li a { padding: 0 28px 13px 28px; margin-bottom: 13px;}
.innerpage_content .main_navigation_content li:last-child a { margin-bottom: 0; padding-bottom: 0;}
/* inner page header css end */


/* reference page start */
.basic_site_inner_content_references{display: flex; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px;}
/* top filter start  */
.basic_site_inner_content_references > nav{width: calc(100% - 116px); margin-bottom: 20px;}
.basic_site_inner_content_references > nav > ul{display: flex; background-color: var(--dark-comman);}
.basic_site_inner_content_references > nav > ul > li{width: 25%;}
.basic_site_inner_content_references > nav > ul > li > a{width: 100%; display: flex;padding: 8px 15px; justify-content: center;color: #000; font-size: 18px; height: 100%;
  align-items: center;
  text-align: center;}
.basic_site_inner_content_references > nav > ul > li > a.active ,.basic_site_inner_content_references > nav > ul > li > a:hover{background-color: #9E005D; color: #fff;}
.basic_site_inner_content_references > nav > ul > li:not(:last-of-type){border-right: 1px solid #fff;}
.basic_site_inner_content_references > nav > ul > li > a > svg{display:none;}
.basic_site_inner_content_references > nav.services-nav{
	width: calc(100% - 0px);
}
.usluge-container article{
	display: table !important;
}
.usluge-container article h1{
	font-family: var(--font-main);
	color: var(--theme-color);
	font-size: 30px;
}
.usluge-container article figure{
	margin: 0px 20px 20px 0;
}
.usluge-container article h1,
.usluge-container article em,
.usluge-container article p{
	display: block;
	width: 100%;
	margin: 20px 0;
}
/* icon start  */
.views_icons_content{display: flex;  justify-content: end; width: 116px;}
.views_icons_content li a { background-color: #000; height: 48px; width: 48px;display: flex; justify-content: center; align-items: center; cursor: pointer;}
.views_icons_content li:not(:last-child){margin-right: 10px;}
.views_icons_content li a svg path{stroke: #fff; fill: #fff;}
.views_icons_content li a.active,.views_icons_content li a:hover{background-color: #9E005D;}
.views_icons_content li a svg {height: 25px;width: 20px;}
/* icon end  */
/* top filter end */

/* lr section start  */
.basic_site_inner_content_references article{display: flex; align-items: center; gap: 30px;}
.basic_site_inner_content_references article > figure{width:calc(40% - 15px);}
.basic_site_inner_content_references article > section{width:calc(60% - 15px);}

/* lr section row css start */
.basic_site_inner_content_references > article:nth-child(even) {flex-direction: row-reverse;}
.basic_site_inner_content_references > article { margin-bottom: 50px;}
.basic_site_inner_content_references > article:last-child { margin-bottom: 0;}
/* lr section row css end */

.basic_site_inner_content_references article > figure { position: relative;}
.basic_site_inner_content_references article > figure img { width: 100%; display: block;}
.basic_site_inner_content_references article > figure > figcaption { position: absolute; bottom: 0; left: 0; background-image: url('../image/camera_icon.png'); background-repeat: no-repeat; background-position: center left 0; padding: 2px 8px 2px 35px; background-color: rgba(0, 0, 0, .8); color: var(--color-ff); font-size: 15px;}

.basic_site_inner_content_references article > section > span{ padding-left: 10px;}
.basic_site_inner_content_references article dl{width: 100%; display: flex; flex-wrap: wrap;}
.basic_site_inner_content_references article dl dt{width: 35%; border-bottom: 1px solid var(--dark-comman); padding: 9px 10px;    font-weight: 600;}
.basic_site_inner_content_references article dl dd{width: 65%;border-bottom: 1px solid var(--dark-comman); padding:8px 5px; color: #4c4c4c; }
hgroup {background-color: var(--dark-comman); padding: 13px 10px; display: flex; justify-content: space-between; margin-bottom: 10px;}
hgroup h1 { line-height: 1.4; margin-right: 10px;}
hgroup h2 { font-size: 18px; line-height: 1.4;}

/* lr section end  */

/* pagination start */
.paging_content{width: 100%; }
.paging_content .paging p{margin-bottom: 0; margin-right: 10px; color: #141313;}
.paging_content .paging{display: flex; align-items: center; justify-content: center;margin-bottom: 15px; flex-wrap: wrap;}
.paging_content .paging a{padding: 10px 15px; background-color: #eee;margin: 3px; border-radius: 4px; line-height: normal;}
.paging_content .paging a:hover{background-color: #000000;color: #fff;}
.paging_content .paging .active{background-color: #000000;color: #fff;}
.paging_right_cnt{display: flex; flex-wrap: wrap; justify-content: center;}
.paging_info{text-align: center;}
.paging_right_cnt{display: flex; flex-wrap: wrap; justify-content: center;}

.home_blog .paging_content {margin-top: 0; padding: 0 15px; margin-bottom: 30px;}
/* pagination end */
/* reference page end */

/* project page css start */

/* project page content css start */
.basic_site_inner_content { margin: 50px 0;}
.basic_site_inner_content h1 { font-size: 38px; color: var(--theme-color); margin-bottom: 15px; font-weight: 600;}
.basic_site_inner_content strong { font-size: 18px; }
.basic_site_inner_content h2 { font-size: 26px; margin-bottom: 25px;}

/* .basic_site_inner_content article { display: flex; flex-wrap: wrap; margin-bottom: 35px;}
.basic_site_inner_content article * { display: block;}
.basic_site_inner_content article h2 { display: block; width: 100%;}
.basic_site_inner_content article aside { width: 50%;}
.basic_site_inner_content .related_links { width: 100%;} */

.basic_site_inner_content a { font-weight: 700;}
.basic_site_inner_content article:not(:last-child) { margin-bottom: 40px;}
.basic_site_inner_content article:not(:first-child, :last-child) { display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 15px;}
.basic_site_inner_content article h2 { width: 100%; margin-bottom: 0;}
.basic_site_inner_content article aside { width: calc(50% - 15px);}
.basic_site_inner_content article aside p { line-height: 1.5;}
/* project page content css end */

/* project page css end */



/* service page css start */

/* service page content css start */
/* .servicepage_content .basic_site_inner_content { display: flex; gap: 30px;}
.servicepage_content .basic_site_inner_content > article { width: calc(50% - 15px);}
.servicepage_content .basic_site_inner_content > div { width: calc(50% - 15px);} */

.servicepage_content .basic_site_inner_content { width: 100%; }
.servicepage_content .basic_site_inner_content { }
.servicepage_content .basic_site_inner_content figure { float: right; 
    /* max-width: 480px;
    max-height: 360px;
    display: table-cell;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    background: #fff;
    border: none;
    float: right;
    margin: 0;
    padding: 0; */
}
.servicepage_content .basic_site_inner_content figure:nth-of-type(2) { margin-top: -413px;}
.servicepage_content .basic_site_inner_content figure img { max-width: 480px;
    max-height: 360px;
    vertical-align: middle;
    text-align: center;}
/* service page content css end */

/* service page css end */

/* inner page footer css start  */
.innerpage_content footer section > p a { display: inline;}
.innerpage_content h1 { margin-top: 30px;}
.innerpage_content h1:nth-of-type(1) { margin-top: 0;}
/* inner page footer css end  */

.basic_site_inner_content iframe{
    width: 100%;
}

/* CSS KONTAKT*/


/*basic site inner content contact*/

.basic_site_inner_content {
	width: 100%;
	margin: 0;
	padding: 60px 0;
	display: table;
	background: #fff;
}

.basic_site_inner {
	width: 1200px;
	margin: 0 auto;
	display: table;
}

.basic_site_inner_content article {
	width: 100%;
	margin: 0;
	padding: 0;
	display: table;
}

.basic_site_inner_content h1 {
	font-size: 32px;
	color: var(--red);
	font-weight: 700;
	margin: 0;
	padding: 0 0 10px;
}

.basic_site_inner_content h2 {
	font-size: 26px;
	color: #000;
	font-weight: 600;
	margin: 0;
	padding: 0 0 5px;
}

.basic_site_inner_content h3 {
	font-size: 22px;
	color: #000;
	font-weight: 600;
	margin: 0;
	padding: 0 0 5px;
}

.basic_site_inner_content figure {
	display: table-cell;
	overflow: hidden;
	vertical-align: middle;
	text-align: center;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
	border-radius: 3px;
	
	float: left;
	margin: 0 30px 30px 0;
	padding: 0;
}

.basic_site_inner_content figure img {
	vertical-align: middle;
	text-align: center;
}

/*basic site inner content contact*/

.basic_site_inner_content_contact {
	width: 100%;
	margin: 0;
	padding: 60px 0;
	display: table;
	background: #fff;
}

.basic_site_inner_content_contact article {
	width: 500px;
	float: left;
	margin: 0;
}

.basic_site_inner_content_contact h1 {
	font-size: 32px;
	color: var(--red);
	font-weight: 700;
	margin: 0;
	padding: 0 0 10px;
}

.basic_site_inner_content_contact h2 {
	font-size: 26px;
	color: #000;
	font-weight: 600;
	margin: 0;
	padding: 0 0 5px;
}

.basic_site_inner_content_contact h3 {
	font-size: 22px;
	color: #000;
	font-weight: 600;
	margin: 0;
	padding: 0 0 5px;
}

.right_column_contact {
	width: 640px;
	float: right;
	margin: 50px 0 0;
}

.basic_site_inner_content_contact iframe {
	width: 100%;
	height: 480px;
	border: none;
	outline: none;
	margin: 60px 0 0;
}

.basic_site_inner_content_contact .grecaptcha-logo iframe {
	width: inherit;
	height: inherit;
	border: inherit;
	margin: inherit;
}


.contact_form {
	width: 100%;
	margin: 0;
	padding: 0;
	display: table;
}

.contact_form dl {
	width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
	display: table;
}

.contact_form div {
	width: 310px;
	float: left;
	margin: 0 20px 20px 0;
	padding: 0;
}

.contact_form div.cnt_form_div_note {
	width: 100%;
	float: none;
	margin: 0 0 15px;
}

.contact_form div:nth-of-type(2n) {
	margin-right: 0;
}

.contact_form dd div {
	width: auto;
	float: none;
	margin: 0;
}

.contact_form dt {
	width: 100%;
	display: table;
	margin: 0;
	padding: 0 !important;
}

.contact_form dt label {
	font-size: 14px;
	color: rgba(0,0,0,0.85);
	font-weight: 600;
	margin: 0;
	padding: 0 0 5px 5px;
	display: block;
	cursor: text;
}

.contact_form dd {
	width: 100% !important;
	display: table;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

.buttons_action input[type="reset"] {
	background: #a5a5a5 !important;
	box-shadow: none !important;
	border-radius: 3px !important;
	border: 1px solid #a5a5a5 !important;
	padding: 11px 30px 12px !important;
	font-size: 12px !important;
	color: #fff !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	float: left;
	width: auto !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	transition: all .2s linear !important;
	margin: 0 5px 0 0 !important;
}

.buttons_action input[type="reset"]:hover, .buttons_action input[type="reset"]:focus {
	font-size: 12px !important;
	color: #fff !important;
	background: #a5a5a5 !important;
	border: 1px solid #a5a5a5 !important;
	opacity: 0.80;
}
.buttons_action input[type="submit"] {
	background: var(--dark-comman) !important;
	border: 1px solid var(--theme-color) !important;
	box-shadow: none !important;
	border-radius: 3px !important;
	padding: 11px 30px 12px !important;
	font-size: 12px !important;
	color: var(--theme-color) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	float: left;
	width: auto !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
	transition: all .2s linear !important;
	margin: 0 !important;
}

.buttons_action input[type="submit"]:hover, .buttons_action input[type="submit"]:focus,
.buttons_action input[type="submit"]:valid:hover, .buttons_action input[type="submit"]:valid:focus {
	font-size: 12px !important;
	color: var(--dark-comman) !important;
	background: var(--theme-color) !important;
	border: 1px solid var(--theme-color) !important;
	opacity: 0.80;
}

.contact_form dl a {
	color: var(--red);
}

.contact_form dd input, .contact_form dd textarea, .contact_form dd select {
	width: 100%;
	max-width: 100%;
	padding: 11px 15px;
	margin: 0 !important;
	background: linear-gradient(#ffffff, #fafafa) !important;
	background: -webkit-linear-gradient(#ffffff, #fafafa) !important;
	border-radius: 3px !important;
	border: 1px solid var(--theme-color) !important;
	box-shadow: none !important;
	transition: all .3s linear;
	color: #2d2d2d;
	font-size: 14px !important;
	opacity: 1;
    color: var(--theme-color);
}

.contact_form dd input:hover, .contact_form dd input:focus, .contact_form dd input:active {
	background: #fff !important;
	border: 1px solid var(--theme-color) !important;
	box-shadow: none !important;
}

.contact_form dd textarea:hover, .contact_form dd textarea:focus, .contact_form dd textarea:active {
	background: #fff !important;
	border: 1px solid #a5a5a5 !important;
	box-shadow: none !important;
}

.contact_form dd select:hover, .contact_form dd select:focus, .contact_form dd select:active {
	background: #fff !important;
	border: 1px solid #a5a5a5 !important;
	box-shadow: none !important;
}

.contact_form dd textarea {
	min-height: 120px;
	max-height: 120px;
	resize: none;
}

.contact_form div dd .formInfo:nth-child(2) {
	position: absolute;
	right: 5px;
	top: -22px;
}

.contact_form dd select {
	padding: 8px 10px 10px;
}

.contact_form dd input[type="file"] {
	padding: 7px 10px 7px;
}

/*invalid input*/

.contact_form dd input:invalid:focus, .contact_form dd select:invalid:focus, .contact_form dd textarea:invalid:focus {
	border: 1px solid #e10f0f !important;
}

.contact_form dd input:valid:focus, .contact_form dd select:valid:focus, .contact_form dd textarea:valid:focus {
	border: 1px solid #179d0a !important;
}

.formInfo {
	margin: 0;
	color: #C20E24;
	font-size: 18px;
	cursor: help;
}

.FormButton{
	width: auto!important;
}

.CaptchaInput {
	float:left;
	width:70px !important;
}

#CaptchaImg2 {
	margin: 7px 0 0 5px;
	border: 1px solid #b4b4b4;
}

.contact_form dd img{
	border: none;
}

#reload_ecaptcha_contact{
	border: none;
}

.contact_form dd.buttons_action {
	padding: 20px 0 0 !important;
}

.contact_form dd div p {
	font-size: 13px;
	color: #555;
	font-weight: normal;
	margin: 0 0 8px;
	padding: 0;
	display: block;
}

.error_content {
	color: #2d2d2d !important;
	margin: 20px 0;
}

.msg_content {
	color: #2d2d2d !important;
	margin: 20px 0;
}
.contact_form .consent_data{
    width: 100%;
}

/*FIX ZA POŠALJI UPIT*/
.posalji-upit-button{
	background-color: #9E005D;
  	color: #fff;
	padding: 10px 25px;
}
.posalji-upit-button:hover{
	color: #FFF;
	cursor: pointer;
}
.basic_site_inner .posalji-upit-button,
.basic_site_inner_content .posalji-upit-button{
	display: none;
}

.sastanak-div{
	position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  z-index: 999999;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--theme-color);
  align-items: center;
  transition: .3s;
}
.sastanak-div a{
	color: #FFD700;
	/*color: #fff; */
  	box-sizing: border-box;
  	text-align: center;
 	line-height: 20px;
  	font-weight: 700;
}
.sastanak-div:hover{
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}