/*
Theme Name: Mare Bonum
Theme URI: http://www.marebonum.hr/
Author: Ivan Livic, EGO MEDIA
Author URI: http://www.egomedia.hr/
Description: Mare Bonum - Izrada brodskih tendi i jastuka
Version: 1.0
License: Copyright © Ego Media, Tezacka 47, 22000 Sibenik - Croatia
License URI: http://www.egomedia.hr/
Tags: css, egomedia, ego, media, mare, bonum
Text Domain: marebonum
Note: Date: 01.12.2019.
Upgrade: Date: 03.09.2024.
-------------------------------------------------------*/

/******************************************************
/// Osnovni stilovi
******************************************************/
:root { scroll-behavior: smooth; }
* { margin: 0px; padding: 0px; border: 0; outline: 0; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; -o-box-sizing: border-box !important; box-sizing: border-box !important;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; scroll-behavior: smooth; }
html:before { content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: rgba(62,57,107,.3) 0 6px 16px 0; -moz-box-shadow: 0px 0px 35px rgba(0,0,0,.8); box-shadow: 0px 0px 35px rgba(0,0,0,.8); z-index: 9999999; }
body { font-family: "Poppins", sans-serif; background: #fff; overflow-x: hidden; animation: fadeInAnimation ease 2s; animation-iteration-count: 1; animation-fill-mode: forwards; }
html, body { min-height: 100%; background: #fff; scroll-behavior: smooth; }
@keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } }
a, a:hover, a:active, a:visited, a:focus { color: inherit; text-decoration: none; outline: 0 !important; }
a { -webkit-transition: all .3s ease; transition: all .3s ease; }
ol, ul, li { list-style-type: none; margin-top: 0; margin-bottom: 0; padding-left: 0; }
h1, h2, h3, h4, h5, h6, figure { margin: 0; }
p { margin-bottom: 0; }

img { max-width: 100%; }
nav { margin-bottom: 0; }
::-moz-selection { color: #fff; background: #73BED2; text-shadow: none; }
::selection { background: #73BED2; color: #fff; text-shadow: none; }
.mb40 { margin-bottom:40px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mb80 { margin-bottom:80px; }
.mt80 { margin-top:80px; }
.mt120 { margin-top: 120px; }
.mb120 { margin-bottom: 120px; }
.pt80 { padding-top:40px; }
.pt120 { padding-top:120px; }
.pb120 { padding-bottom: 120px; }
.no-padding { padding-left:0; padding-right:0; }
.no-margin { margin-left:0; margin-right:0; }

.animDe-1 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -ms-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; }
.animDe-2 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }
.animDe-3 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -ms-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; }
.animDe-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -ms-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; }
.animDe-5 { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; -ms-animation-delay: 2.5s; -o-animation-delay: 2.5s; animation-delay: 2.5s; }

.color-1 { color: #73BED2; }
.color-2 { color: #0A1051; }
.background-1 { background: #f3f5f9; }

.fw-3 { font-weight:300; }
.fw-4 { font-weight:400; }
.fw-5 { font-weight:500; }
.fw-6 { font-weight:600; }
.fw-7 { font-weight:700!important; }
.fs-i { font-style: italic; }

.container-custom { max-width: 1600px; margin:0px auto}

@media (min-width: 1200px) { 
	.container { max-width: 1200px; }
}
.SiteWrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; }
.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff url(../img/preloader.gif) center center no-repeat; z-index: 99999999; }
.preloader span { left: 50%; top: 58%; transform: translate(-50%, -50%); position: fixed; display:block; text-align:center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #73BED2 }

.prirodna-sjena { filter: url('data:image/svg+xml,\ <svg class="prirodna-sjena" xmlns="http://www.w3.org/2000/svg">\ <filter id="naturalShadow" x="0" y="0" width="2" height="2">\<feOffset in="SourceGraphic" dx="1" dy="1" />\<feGaussianBlur stdDeviation="1" result="blur" />\<feMerge>\ <feMergeNode in="blur"/>\ <feMergeNode in="SourceGraphic"/>\</feMerge>\ </filter>\ </svg>#naturalShadow'); }
.prasina { position: fixed; z-index: 1001; top: 0; left: 0; width: 100vw; height: 100%; pointer-events: none; background-image: url(../img/bg/prasina.png); }

/******************************************************
/// Galerija
******************************************************/
.fotka { margin-bottom:30px; }
.fotka a:hover { opacity:0.65; }

.mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; transition: all 0.35s ease-out; }
	.mfp-fade.mfp-bg.mfp-ready { opacity: 1; }
	.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
	.mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; transition: all 0.35s ease-out; }
	.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; }
	.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; }

/******************************************************
/// Header
******************************************************/
.header-top {  border-bottom: 8px solid #73BED2; }
.header { position: absolute;  left: 50%; transform: translate(-50%, -0%); z-index: 999; width:100%; background-color: rgba(255,255,255,0.75); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 1) 100%);  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 1) 100%);  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); }
.header.subpage { left: 0%; transform: translate(0%, 0%); background-color: rgba(255,255,255,0.75); background-image: url(../img/bg/raster.svg); background-position: center; background-repeat: repeat; background-size: 6%; }
.header .logotip { position: relative; }
.header .logotip svg { margin: 60px 0; }
.header .kontakti { position: relative; padding-left: 50px; }
.header .kontakti:before { content: ''; width: 10000000px; height: 84px; position: absolute; top: 5px; left: 0; background: #fff; z-index: 9; border-bottom-left-radius: 15px; }
.header .kontakti .sadrzaj { display: inline-block; vertical-align: middle; position: relative; top: 24px; z-index: 10; }
.header .kontakti .sadrzaj + .sadrzaj { margin-left: 38px; }
.header .kontakti .sadrzaj .ikona, .header .kontakti .sadrzaj .tekst { display: table-cell; vertical-align: middle; }
.header .kontakti .sadrzaj .ikona i { color: #0A1051; font-size: 32px; }
.header .kontakti .sadrzaj .tekst { padding-left: 10px; }
.header .kontakti .sadrzaj .tekst p { color: #7C8389; font-size: 14px; }
.header .kontakti .sadrzaj .tekst span { color: #0A1051; font-size: 17px; display: block; }
.header .kontakti .sadrzaj .header-btn { font-size: 11px; background: #73BED2; text-transform: uppercase; display: inline-block; vertical-align: middle; color: #0A1051; font-weight: 700; letter-spacing: .1em; padding: 12px 30px; border-radius: 5px; box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.6); -webkit-transition: all .4s ease; transition: all .4s ease; animation: pulse 2s infinite; }
.header .kontakti .sadrzaj .header-btn:hover { background-color: #0A1051; color: #73BED2; }
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(87, 197, 206, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(87, 197, 206, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(87, 197, 206, 0); }
}
.jezici-wrapper { position: absolute; top: -40px;right:30px; }
.jezici ul { display:inline; margin: 0; padding: 0; float: right; }
.jezici ul li { display: inline-block; position: relative; list-style: none; z-index: 999; text-align:center; padding: 75px 19px 19px 19px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgba(115, 190, 210, 0.20); box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.6); }
.jezici ul li a { opacity: 1; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
.jezici ul li a img { max-width: 30px; }
.jezici ul li a span { display: block; font-size: 9px; font-weight: 600; color: #0A1051; letter-spacing: 1px; margin-top:8px; }
.jezici ul li a:hover { opacity: 0.40; }

/******************************************************
/// Izbornik
******************************************************/
.izbornik { background-color: transparent; margin-bottom: 0; border: none; border-radius: 0; padding: 0; position: relative; padding-top: 10px; background-color: #0A1051; }
.izbornik .container { background: transparent; position: relative; display: block; }
.izbornik .container .logotip { float: left; position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width:200px; }
.izbornik .container .navbar-brand { height: auto; margin: 0; }
.izbornik .container .menu-toggler { display: none; }
.izbornik .container .desno { position: absolute; top: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 350px; }
.izbornik .container .desno .social a { font-size: 18px; color: rgba(255, 255, 255, 0.4); -webkit-transition: all .4s ease; transition: all .4s ease; }
.izbornik .container .desno .social a:hover { color: #fff; }
.izbornik .container .desno .social a + a { margin-left: 35px; }
.izbornik .navigacija { float: right; text-align: left; }

@media (min-width: 1200px) {
	.izbornik .navigacija { display: block !important; }
}

.izbornik ul.menu { margin: 0; padding: 0; list-style: none; }
.izbornik ul.menu li a .sub-nav-toggler { display: none; }
.izbornik ul.menu > li { position: relative; padding: 60px 0 30px 0; display: inline-block; vertical-align: middle; }

.izbornik ul.menu > li + li { margin-left: 48px; }
.izbornik ul.menu > li:first-child { padding-left: 0; }
.izbornik ul.menu > li:last-child { padding-right: 0; }
.izbornik ul.menu > li > a { font-weight: 700; font-size: 22px; letter-spacing: 0px; color: #fff; padding: 0; text-transform: uppercase; -webkit-transition: all .4s ease; transition: all .4s ease; position: relative; }
.izbornik ul.menu > li.current > a, .izbornik ul.menu > li:hover > a { color: #73BED2; }

.izbornik ul.menu > li > .sub-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 220px; padding: 0; border-radius: 0px;  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; text-align: left; list-style: none; background-color: #73BED2; background-clip: padding-box; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s ease, visibility .4s ease; transition: opacity .4s ease, visibility .4s ease; -webkit-box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.1); min-width: 200px; padding: 25px 0px; }

@media (min-width: 1200px) {
	.izbornik ul.menu > li > .sub-menu { display: block !important; }
}

.izbornik ul.menu > li > .sub-menu.right-align { left: auto; right: 0; }
.izbornik ul.menu > li > .sub-menu.center-align { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.izbornik ul.menu > li > .sub-menu > li { display: block; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; }
.izbornik ul.menu > li > .sub-menu > li + li { margin-top: 10px; }
.izbornik ul.menu > li > .sub-menu > li > a { display: block; white-space: nowrap; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; font-size: 16px; color: #0A1051; font-weight: 700; padding: 0px 40px; display: block; line-height: 30px; }
.izbornik ul.menu > li > .sub-menu > li:hover > a, .izbornik ul.menu > li > .sub-menu > li.current > a { color: #fff; opacity: 0.50; }
.izbornik ul.menu > li:hover:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left bottom; transform-origin: left bottom; }
.izbornik ul.menu > li:hover > .sub-menu { opacity: 1; visibility: visible; }
.izbornik ul.menu > li > ul > li > .sub-menu { position: absolute; top: 0%; left: 100%; z-index: 1000; float: left; min-width: 220px; padding: 0px 0px; text-align: left; list-style: none; background-color: #73BED2; background-clip: padding-box; opacity: 0; border-radius: 0px; visibility: hidden; -webkit-transition: opacity .4s ease, visibility .4s ease; transition: opacity .4s ease, visibility .4s ease; -webkit-box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.1); min-width: 200px; padding: 25px 0px; }

@media (min-width: 1200px) {
	.izbornik ul.menu > li > ul > li > .sub-menu { display: block !important; }
}

.izbornik ul.menu > li > ul > li > .sub-menu.right-align { left: auto; right: 100%; }
.izbornik ul.menu > li > ul > li > .sub-menu.center-align { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.izbornik ul.menu > li > ul > li > .sub-menu > li { display: block; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; }
.izbornik ul.menu > li > ul > li > .sub-menu > li + li { margin-top: 10px; }
.izbornik ul.menu > li > ul > li > .sub-menu > li > a { display: block; white-space: nowrap; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; font-size: 14px; color: #FFFFFF; font-weight: 500; padding: 0px 40px; display: block; line-height: 26px; }
.izbornik ul.menu > li > ul > li > .sub-menu > li:hover > a { color: #FFDF4B; }
.izbornik ul.menu > li > ul > li:hover > .sub-menu { opacity: 1; visibility: visible; }
.izbornik ul.menu > li > ul > li ul { display: none; }
.izbornik.strictly-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 991; padding-top: 0; border-bottom: 0; -webkit-box-shadow: drop-shadow-converter(#000, 8, 120, 0, 0, 21px, false); box-shadow: drop-shadow-converter(#000, 8, 120, 0, 0, 21px, false); }

/******************************************************
/// Slider
******************************************************/
#slider { margin-top: 0px; position: relative; top: 0px; z-index:99; }
#slider .caption { position: absolute; top: 0; right: 0; left: 0; bottom: 0; padding: 0; text-align: right; text-shadow: none; }
#slider [class*=carousel-control-one] { width: 74px; height: 72px; font-size: 24px; background: #fff; color: #0A1051; opacity: .2; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .4s ease; transition: all .4s ease; }
#slider [class*=carousel-control-one]:hover { opacity: 1; }

@media (max-width: 575px) {
	#slider [class*=carousel-control-one] { width: 35px; height: 35px; line-height: 35px; }
}

#slider [class*=carousel-control-one-next] { right: 3%; }
#slider [class*=carousel-control-one-prev] { left: 3%; }
#slider .carousel-indicators { bottom: 43px; }
#slider .carousel-indicators li { width: 30px; height:30px; border: none; border-radius: 50%; margin-right: 5px; background: #73BED2; -webkit-transition: all .4s ease; transition: all .4s ease; }
#slider .carousel-indicators li.active { width: 30px !important; background: #fff; }

@media (max-width: 1199px) {
	#slider .caption .container { max-width: 960px; }
}

@media (max-width: 991px) {
	#slider .caption .container { max-width: 720px; }
}

/* Slider height fix */
#slider.slides .carousel-inner .carousel-item { min-height: 964px; height: 100%; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #0A1051; }
#slider.slides .caption { background-color: rgba(1, 15, 27, 0.45); }
#slider.slides .animDe-1 { -webkit-animation-delay: .5s; animation-delay: .5s; }
#slider.slides .animDe-2 { -webkit-animation-delay: 1s; animation-delay: 1s; }
#slider.slides .animDe-3 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
#slider.slides .animDe-4 { -webkit-animation-delay: 2s; animation-delay: 2s; }
#slider.slides .animDe-5 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

/******************************************************
/// Naslovi stranica - breadcrumb
******************************************************/
.naslovi-wrapper { padding: 80px 0 106px 400px; background: #f3f5f9; }
.naslov { position: relative; padding-top: 34px; color: #0A1051; }
.naslov h1 { font-weight: 700; font-size: 55px; }
.naslov p, .naslov li, .naslov li a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.naslov li a { color: #0A1051; }
.naslov li { position: relative; display: inline-block; margin-left: 7px; }
.naslov li:not(:last-of-type) { padding-right: 13px; }
.naslov li:not(:last-of-type)::after { position: absolute; content: '-'; color: #0A1051; right: -3px; }

/******************************************************
/// Sadrzaji
******************************************************/
.sadrzaj-wrapper { padding-top: 120px;}
.sadrzaj-wrapper header figure figcaption p { padding: 80px 150px 0px; font-size: 20px; font-weight: 400; line-height: 35px; text-align: center; color: #7c848a; }
.sadrzaj-wrapper.pravne-informacije header figure figcaption { padding-top: 120px; }
.sadrzaj-wrapper.pravne-informacije header figure figcaption p { padding: 0 0; font-size: 16px; font-weight: 400; line-height: 28px; text-align: left; color: #7c848a; }
.sadrzaj-wrapper.pravne-informacije header figure figcaption ul { list-style-type: disc; padding: 0 0; font-size: 16px; font-weight: 400; line-height: 28px; text-align: left; color: #7c848a; margin: 20px 0 20px 40px; }
.sadrzaj-wrapper.pravne-informacije header figure figcaption ul li { list-style-type: disc; }

.naslovnica { position: relative; z-index: 2; padding-top: 140px; }
.naslovnica section > p { font-size: 18px; line-height: 30px; color: #7c848a; }
.naslovnica section > p:first-of-type { margin-top: -8px; }
.naslovnica section > p:not(:last-of-type) { padding-bottom: 28px; }
.naslovnica section > p > a { color: #0A1051; font-weight: 500; }
.naslovnica section > p > a:hover { color: #73BED2; }
.naslovnica figure { position: relative; z-index: 2; }
.naslovnica figure img { border-radius: 15px; }
.naslovnica figure::before { position: absolute; content: ''; width: 100vw; height: 100%; top: 0; right: 100%; background: #fff; z-index: -1; }
.tekst-wrapper { box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15);  box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.6); padding: 20px 0px 35px 0; margin-top: 115px; background: #0A1051; position: relative; z-index: 1; }
.tekst-wrapper::before { position: absolute; content: ''; width: 332px; height: 100%; background: inherit; top: 0; right: calc(100% - 2px); z-index: -1; border-bottom-left-radius: 15px; }
.tekst-wrapper::after { position: absolute; content: ''; width: calc(100vw + 2px); height: 100%; background: inherit; left: calc(100% - 2px); top: 0; z-index: -1; }
.tekst { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }
.tekst h1 { font-size: 40px; font-weight: 700; padding-top: 10px; padding-bottom: 5px; }
.tekst p { font-size: 16px; }
.tekst i { font-size: 43px; }
  
.proizvodi-wrapper { padding-top: 120px; }
.proizvodi-wrapper .proizvod { margin-bottom: 55px; }
.proizvodi-wrapper .proizvod figure a:hover { opacity:0.65; }
.proizvodi-wrapper .proizvod figure img { border-radius: 15px;  }
.proizvod-sadrzaj { width: calc(100% - 20px); margin-left: auto; padding: 0px 50px 0; text-align: center; position: relative; z-index: 1; }
.proizvod-sadrzaj::before { position: absolute; content: ''; width: 90%; height: calc(90% + 10px); background: #fff; bottom: 0; right: 27px; border-radius: 15px; z-index: -1; }
.proizvod-sadrzaj > h2 { margin-top: -15px; position: relative; }
.proizvod-sadrzaj > h2 > a, .proizvod-sadrzaj > p, .proizvod-sadrzaj > a { font-weight: 400; }
.proizvod-sadrzaj > h2 > a { font-size: 22px; color: #0A1051; font-weight: 700; text-transform: uppercase; }
.proizvod-sadrzaj > h2 > a:hover { color: #73BED2; }
.proizvod-sadrzaj p { font-size: 16px; line-height: 30px; color: #7c848a; padding-top: 28px; padding-bottom: 31px; }
.proizvod-sadrzaj > a { font-size: 11px; letter-spacing: 4px; color: #0A1051; text-transform: uppercase; }
.proizvod-sadrzaj > a:hover { color: #73BED2 }

.brodske-tende, .brodski-jastuci, .pergole { margin-top: 0; position: relative; z-index: 1; }
.brodske-tende .naslov, .brodski-jastuci .naslov, .pergole .naslov { margin: 180px 0 336px; z-index: 2; }

.brodske-tende::before { position: absolute; content: ''; width: 100%; height: calc(100% - 185px); top: 0; left: 0; background: #0A1051; z-index: -1; }
.brodske-tende figure img { max-width: none; position: absolute; top: 0; right: 0; z-index: 1; box-shadow: 0px 10px 1px 0px #73bed2; border-bottom-right-radius: 100px; }
.brodske-tende .proizvodi-lista { padding: 80px 100px 85px; border-radius: 15px; position: absolute; top: calc(50% - 90px); left: calc(-50% - 50px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); white-space: nowrap; z-index: 3; background: #fff; counter-reset: zero; }

.brodski-jastuci::before { position: absolute; content: ''; width: 100%; height: calc(100% - 185px); top: 0; left: 0; background: #0A1051; z-index: -1; }
.brodski-jastuci figure img { max-width: none; position: absolute; top: 0; left: 0; z-index: 1; box-shadow: 0px 10px 1px 0px #73bed2; border-bottom-left-radius: 100px; }
.brodski-jastuci .proizvodi-lista { padding: 80px 100px 85px; border-radius: 15px; position: absolute; top: calc(50% - 90px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); white-space: nowrap; z-index: 3; background: #fff; counter-reset: zero; }

.pergole::before { position: absolute; content: ''; width: 100%; height: calc(100% - 205px); top: 0; left: 0; background: #0A1051; z-index: -1; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(../img/home/pergoleBG.jpg);}
.pergole figure img { max-width: none; position: absolute; top: 0; right: 0; z-index: 1; box-shadow: 0px 10px 1px 0px #73bed2; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; }

.proizvodi-lista li { counter-increment: zero; padding-left: 35px; position: relative; font-weight: 500; font-size: 18px; line-height: 21px; color: #0A1051; border-bottom: 2px solid #73BED2; }
.proizvodi-lista li:hover { color: #7c848a; }
.proizvodi-lista li:last-child { border: 0; }
.proizvodi-lista li:not(:last-of-type) { margin-bottom: 20px; padding-bottom: 20px; }
.proizvodi-lista li::before { position: absolute; content: '0' counter(zero); left: 0; color: #73BED2; font-weight: 900; }

.gumb-detaljnije a { position: relative; bottom: -5px; left: 0px; z-index: 99; min-width:285px; font-size:13px; background: #73BED2; text-transform: uppercase; display: inline-block; vertical-align: middle; color: #0A1051; font-weight: 700; letter-spacing: .2em; padding: 22px 39px; border-radius: 5px; box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.6); }
.gumb-detaljnije a:hover { background: #0A1051; color: #73BED2; }

.proces-wrapper:after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(top, rgba(255, 255, 255 0) 0%, #fff 37%, #fff 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 37%, #fff 100%); background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, #fff 37%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff', endColorstr='#fff',GradientType=1 ); }
.proces-wrapper { padding: 50px 0 0; width: 100%; position: relative; z-index: 1;  }
.proces-wrapper.p20 { padding-top: 20px;  }
.proces-wrapper .naslov { margin-bottom: 0px; }
.proces { padding: 86px 15px 31px; background-color: rgba(255, 255, 255, 0); text-align: center; }
.proces:not(:last-of-type) { margin-right: 6px; }
.proces h1 { display: flex; height: 180px; margin:0px auto; font-size: 100px; font-weight: 900; color: #0A1051; width: fit-content; min-width: 1rem; padding: 0.5rem; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 50%; border: 10px solid #73bed263; box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.10), 0px 10px 14px -16px rgba(0, 0, 0, 0.10); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.25);}
.proces h2 { font-size: 20px; font-weight: 700; padding-top: 41px; padding-bottom: 33px; }
.proces p { font-size: 14px; line-height: 24px; color: #7C8389; }

.proizvodaci-wrapper { padding: 80px 0; margin-top: 0px; overflow: hidden; position: relative; z-index: 3; }
.proizvodaci-wrapper a { opacity: 1; display: inline-block; }
.proizvodaci-wrapper a:hover { opacity: .3; }
.proizvodaci-carousel.owl-carousel .owl-controls { display: none !important; }
.proizvodaci-carousel.owl-carousel .owl-item { text-align: center; }
.proizvodaci-carousel.owl-carousel .owl-item img { width: auto; display: inline-block; }

/******************************************************
/// Footer
******************************************************/
footer { box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.60), 0px 10px 14px -16px rgba(0, 0, 0, 0.20); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.25); background: linear-gradient(to left bottom, rgba(255, 255, 255, 0) 20%, #fff 50%) 0 0 / cover, url(../img/bg/footer-bg.jpg) bottom center / cover no-repeat;}
.footer { background: transparent; position: relative; z-index: 2; margin: 140px 0 0 0; padding: 120px 0 20px 0; border-top: 0px solid #73BED2;  }
.footer-sadrzaj { padding: 50px 0 0 0; position: relative; z-index: 1; }
.footer .f-menuWrap { position: relative; overflow: hidden; padding: 10px 0 20px 0; text-align: center; margin-top: 20px; margin-left: 0px; }
.footer .f-menu ul { display: inline-flex; margin: 0; padding: 16px 0; list-style-type: none; }
.footer .f-menu ul li { vertical-align: baseline; letter-spacing: 0; }
.footer .f-menu ul li a { -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; font-size: 14px; font-weight: 700; color: #0A1051; }
.footer .f-menu ul li + li:before { content: ' '; display: inline-block; width: 0; height: .8em; margin: 0 1em; vertical-align: baseline; border-left: 1px solid #57C5CE; }
.footer .f-menu ul li a:hover { color: #7C8389; }
.copyright > p { font-size: 14px; line-height: 26px; padding-top: 0; color:#7C8389;font-weight: 500; text-align: center; }
.copyright > p strong { font-size: 16px; line-height: 26px; font-weight: 700; color:#0A1051; }

.design { max-width:190px; margin:0px auto; font-size: 10px; font-weight: 400; color: #000; text-transform:uppercase; padding: 0 10px 50px 10px; margin-top: 20px;  }
.design a { color:#0A1051; display:block; padding-top:3px; }
.design a:hover { opacity: 0.75; }

/******************************************************
/// Kontakt
******************************************************/
.kontakt-wrapper { margin-top: 220px; }
.kontakt-wrapper figure { position: relative; z-index: 1; padding-bottom: 100px; }
.kontakt-wrapper figcaption { position: absolute; z-index: 2; left: 0; bottom: 0; background: #0A1051; padding: 100px 100px 105px; width: 570px; border-radius: 15px; }
.kontakt-tekst { padding: 120px 0; }
.kontakt-tekst img { border-radius: 15px; }
.kontakt-tekst figcaption .naslov { margin-bottom: 34px; }
.kontakt-tekst figcaption .naslov h1 { font-weight: 100; font-size: 40px; }
.kontakt-tekst figcaption .naslov p, .kontakt-tekst figcaption ul li p { color: #ffdedf; }
.kontakt-tekst figcaption ul li p { font-size: 20px; font-weight: 100; }
.kontakt-tekst figcaption ul li h2 { font-size: 26px; line-height: 40px; color: #fff; }
.kontakt-tekst figcaption ul li:not(:last-of-type) { margin-bottom: 47px; }
.kontakt-obrazac { padding-bottom: 60px; }
.kontakt-obrazac .naslov { margin-bottom: 59px; }
.kontakt-obrazac form input, .kontakt-obrazac form textarea { padding-left: 30px; margin-bottom: 20px; background: #e7e9ef; font-size: 16px; font-weight: 600; color: #0A1051; }
.kontakt-obrazac form input { width: calc(50% - 10px); height: 71px; }
.kontakt-obrazac form textarea { width: 100%; height: 250px; padding-top: 15px; }
.kontakt-obrazac form button { display: inline-block; padding: 22px 38px 22px 40px; background: #73BED2; color: #0A1051; font-size: 16px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; -webkit-transition: all .4s ease; transition: all .4s ease; box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.25); }
.kontakt-obrazac form button:hover { background: #0A1051; color: #73BED2; }

/******************************************************
/// Na vrh, na sekciju
******************************************************/
.scrollup { position: fixed; width:50px; height: 50px; bottom: 10px; right: 10px; display: none; padding: 0 0 5px 0; text-align:center; font-size:45px; line-height:45px; background-color: #0A1051; border-radius: 50%; z-index:999; box-shadow: 0px 0px 10px 0 rgba(0, 114, 186, 0.15), 0px 10px 14px -16px rgba(0, 0, 0, 0.15); box-shadow: 0 -25px 85px rgba(50, 50, 50, 0.6); }
.scrollup i { color:#fff; }
	.scrollup:hover,.scrollup:focus { animation: pulse 2s infinite; background-color: #73BED2; color:#0A1051; text-decoration:none; }

.scrolldown { color: #73BED2; position:absolute; z-index:99; left:0; right:0; bottom:0px; text-align:center; cursor:pointer; }
	.scrolldown i { background: #0A1051; font-size: 57px; padding: 5px 0px; width: 85px; }
	.scrolldown:hover, .scrolldown:focus { color:#fff; text-decoration:none; }