* { 
margin: 0; 
padding: 0; 
border: 0; 
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html {
font-size: 100%;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'PublicSans';
color: #000;
}
a, a:link, a:hover, a:focus, a:active {
text-decoration: none;
outline: 0;
}
*:focus {
outline: 0!important;
}
ul, ol {
list-style: none;
}
::selection { background: #B09953; color: #fff; }
::-moz-selection { background: #B09953; color: #fff; } @media screen and (min-aspect-ratio: 1/1) {
.first-visit {
overflow: hidden;
animation: move7 0.1s ease-out 4.7s forwards;
}
.first-visit header .logo { 
z-index: 20001;
height: 13vh;
top: -13vh; 
left: 5vh;
opacity: 0;
animation: move0 .1s ease-out 0s forwards, move1 1s ease-out 0.5s forwards, move2 1s ease-out 1.5s forwards, move3 1s ease-out 3s forwards; 
}
.first-visit.even-section header .logo, 
.first-visit.page-id-308.even-section header .logo, 
.first-visit.page-id-1198.even-section header .logo {
filter: unset;
animation: move0 .1s ease-out 0s forwards, move1 1s ease-out 0.5s forwards, move2 1s ease-out 1.5s forwards, move3a 1s ease-out 3s forwards;
}
.first-visit .backdrop { 
width: 100vw; 
height: 100vh; 
position: fixed; 
background: #fff; 
z-index: 20000;
top: 0;
left: 0vw;
animation: move6 1.5s ease-out 3.3s forwards;
}
.first-visit aside {
width: 50%;
z-index: 20001;
animation: move0a .1s ease-out 0s forwards, move4 1s ease-out 3s forwards;
}
.first-visit aside ul .menu-item {
opacity: 0;
}
.first-visit aside ul .menu-item:nth-child(1) {
animation: move1 1s ease-out 1.6s forwards;
}
.first-visit aside ul .menu-item:nth-child(2) {
animation: move1 1s ease-out 1.9s forwards;
}
.first-visit aside ul .menu-item:nth-child(3) {
animation: move1 1s ease-out 2.2s forwards;
}
.first-visit aside ul .menu-item a svg {
filter: unset;
width: 10vw;
animation: move5 1s ease-out 3s forwards;
}
.first-visit.even-section aside ul .menu-item a svg {
animation: none;
animation: move5a 1s ease-out 3s forwards;
}
@keyframes move0 { 0% { top: -13vh; height: 13vh; width: 26vh; left: 5vh; } 100% { top: 37vh; height: 26vh; width: 52vh; left: calc(50vw - 25.09vh); } }
@keyframes move0a { 0% { width: 50%; } 100% { width: 100vw; } }
@keyframes move1 { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes move2 { 0% { top: 37vh; } 100% { top: 10vh; } }
@keyframes move3 { 0% { top: 10vh; left: calc(50vw - 25.09vh); height: 26vh; } 100% { top: 5vh; left: 5vh; height: 13vh; } }
@keyframes move3a { 0% { top: 10vh; left: calc(50vw - 25.09vh); height: 26vh; filter: unset; } 100% { top: 5vh; left: 5vh; height: 13vh; filter: brightness(0%) invert(1); } }
@keyframes move4 { 0% { width: 100vw; } 100% { width: 50%; } }
@keyframes move5 { 0% { width: 10vw; filter: unset; } 100% { width: 7vw; filter: brightness(0%) invert(1); } }
@keyframes move5a { 0% { width: 10vw; } 100% { width: 7vw; } }
@keyframes move6 { 0% { left: 0vw; top: 0; } 50% { left: -50vw; top: 0; } 100% { left: -50vw; top: -100vh; } }
@keyframes move7 { 0% { overflow: hidden; } 100% { overflow: unset; } }
} .d-flex {
display: flex;
}
.justify-content-between {
justify-content: space-between;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.img-fluid {
max-width: 100%;
}
.icon-font {
font-family: 'Icons';
} header .logo {
position: fixed;
top: 5vh;
left: 5vh;
height: 13vh;
width: 26vh;
z-index: 10000;
} .page-id-308.even-section header .logo,
.page-id-1198.even-section header .logo {
filter:none;
z-index: 9999;
} 
.lang a:first-child {
margin-right: 20px;
}
.lang .active {
opacity: 0.6;
}
.lang a, .navigation-open.even-section .lang  a{
color: #fff;
}
.even-section .lang {
color: #000;
}
.lang, .search-toggle {
display: none;
}
.navigation-open .lang {
display: flex;
align-items: center;
}
.header-right-side {
position: fixed;
top: 5vh;
right: 50px;
display: flex;
align-items: center;
width: calc(50vw - 100px);
z-index: 100000;
}
.ms-auto {
margin-left: auto;
}
.navigation {
position: fixed;
right: -50vw;
height: 100%;
width: 50vw;
background: #B09953;
z-index: 10000;
transition: right 0.3s;
}
.navigation.active {
right: 0;
}
.navigation.active a {
color: #fff;
}
.navigation-toggle {
position: relative;
height: 25px;
width: 25px;
margin-left: 25px;
cursor: pointer;
}
.navigation-toggle span {
position: absolute;
display: block;
width: 100%;
height: 0.125rem;
transition: transform 0.3s;
}
header .navigation-toggle span, .even-section.navigation-open header .navigation-toggle span {
background: #fff;
} 
.even-section header .navigation-toggle span {
background: #000;
}
.navigation-toggle .bar1 {
top: 0;
}
.navigation-toggle .bar2 {
top: 50%;
transform: translateY(-50%);
}
.navigation-toggle .bar3 {
bottom: 0;
}
.navigation-toggle.active .bar1 {
top: 50%;
transform: translateY(0) rotate(45deg);
}
.navigation-toggle.active .bar2 {
opacity: 0;
}
.navigation-toggle.active .bar3 {
top: 50%;
bottom: auto;
transform: translateY(0) rotate(-45deg);
}
.navigation-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 0 50px;
overflow-y: auto;
}
.navigation ul {
display: flex;
flex-direction: column;
}
.navigation ul li a {
color: #fff;
}
nav ul li a {
position: relative;
}
nav ul li a:after {
content: "";
display: block;
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background: #fff;
transition: all 0.5s;
}
.navigation ul li a:after {
background: #fff;
}
nav ul li a:hover::after {
width: 100%;
}
.main-navigation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%; }
.main-navigation ul li:not(:last-child) {
margin-bottom: clamp(24px, 4vmin, 48px); }
.main-navigation ul li a {
font-size: clamp(20px, 3.5vmin, 36px); }
.small-navigation {
padding-top: 5vh;
}
.small-navigation ul li:not(:last-child) {
margin-bottom: 10px;
}
.small-navigation ul li a {
font-size: 1rem;
}
.navigation .socials {
padding-bottom: 5vh;
}
.navigation .socials a:not(:last-child) {
margin-right: 20px;
}
.search-form {
position: relative;
}
.search-toggle {
font-size: 1.625rem;
color: #fff;
cursor: pointer;
}
.navigation-open .search-toggle {
display: block;
}
.svg-logo-drawing, .svg-logo-text, .svg-circle {
transition: all 0.4s;
}
.page-not-top .svg-logo-drawing {
fill: #fff;
transform: scale(0.65);
transform-origin: 24% 45%;
}
.page-not-top .svg-circle {
fill: #B09953;
}
.page-not-top .svg-logo-text {
opacity: 0;
}
.search-form form {
display: none;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.search-form form.active {
display: flex;
}
.search-form form input {
height: 45px;
padding: 0 10px;
width: 200px;
border-radius: 0;
}
.search-form form input, .search-form form ::placeholder {
font-size: 1rem;
}
.search-form form input:focus {
outline: 0;
border: 0;
}
.search-form form button {
height: 45px;
width: 50px;
font-size: 1.625rem;
background: #B09953;
color: #fff;
border-radius: 0;
margin-left: -1px;
cursor: pointer;
}
.navigation-open .search-form form button {
color: #B09953;
background: #fff;
border-left: 1px solid #fff;
}
.section .image {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: -webkit-sticky; position: sticky;
top: 0;
}
.section .blockImage {
height: 100vh;
width: auto;
}
.gallery-wrapper::-webkit-scrollbar {
display: none;
} 
@media screen and (min-aspect-ratio: 2/1) { 
.section .blockImage {
height: auto;
width: 100%;
}
}
aside {
position: fixed;
bottom: 0;
right: 0;
width: 50%;
transition: all 0.3s;
display: flex;
justify-content: center;
z-index: 100;
}
.list-visible aside,
.footer-visible aside {
opacity: 0;
z-index: -1;
}
aside nav {
padding-bottom: 50px;
max-width: 800px;
width: 100%;
}
aside ul {
display: flex;
align-items: center;
justify-content: space-evenly;
}
aside ul .menu-item a svg {
width: 7vw;
height: auto;
}
aside ul li a {
display: inline-block;
padding: 15px;
border: 1px solid transparent;
border-radius: 25px;
transition: border-color 0.3s;
}
aside ul li a:after {
content: none;
}
aside ul li a:hover {
border-color: #fff;
}
.even-section-bottom aside ul li a:hover {
border-color: #B09953;
}
aside svg {
filter: brightness(0%) invert(1);
transition: all 0.3s;
}
.even-section-bottom aside svg {
filter: unset;
}
.section {
position: relative;
min-height: 100vh;
}
.home .sections-wrapper .section:first-child h1 {
font-size: clamp(60px, 9vmin, 100px);
margin-bottom: 2vh;
}
.home .sections-wrapper .section:first-child p {
max-width: 600px;
}
.topomap-inViewport::after {
content: none;
}
.topo-wrapper { 
width: 100%; 
height: 100vh; 
overflow: hidden; 
position: relative; 
}
.topo-wrapper svg { 
width: 100%; 
height: 100vh; 
}
.topo-content { 
width: 50%; 
height: 100vh; 
position: absolute; 
top: 0; 
background: #B09953; 
transition: all .3s ease-in-out;
display: flex;
justify-content: center;
align-items: center; 
z-index: 1000;
}
.topo-content > div {
position: relative;
padding: 23vh 7vw 15vh 7vw;
max-width: 700px;
width: 100%;
}
.topo-content-close {
display: inline-block;
color: #fff!important;
font-size: 2.5rem!important;
}
.topo-content-left > div {
text-align: right;
}
.topo-content img {
max-width: 40%;
max-height: 20vh;
}
.topo-content h3,
.topo-content p,
.topo-content a {
color: #fff;
}
.topo-content-left { 
left: -50%; 
}
.topo-content-right { 
right: -50%; 
}
.topo-content-left.active { 
left: 0; 
}
.topo-content-right.active { 
right: 0; 
}
.topo-wrapper .hot { 
cursor: pointer; 
}
.topo-wrapper .big, 
.topo-wrapper .small { 
animation: .5s ease-in 0s infinite alternate both running; 
transition: fill .3s ease-in-out;
transform-origin: 50% 50%;
transform-box: fill-box;
animation-name: pulse;
}
.topo-wrapper .big:hover, 
.topo-wrapper .small:hover { 
fill: #000; 
}
@keyframes pulse { 0% { transform: scale(1) } 100% { transform: scale(1.2366) } }
.tip {
cursor: pointer;
}
.tip circle {
r: 10.9;
transition: all .3s ease-in-out;
}
.tip:hover circle {
r: 16;
}
.section h1, .section h2 {
font-size: clamp(30px, 6vmin, 50px);
line-height: 1;
font-weight: 600;
margin: 4vh 0;
max-width: 75%;
}
.section h1:first-of-type, .section h2:first-of-type {
margin-top: 0;
}
.section h3 {
font-size: clamp(30px, 5vmin, 50px);
line-height: 1;
font-weight: 600;
color: #b09953;
}
.section.section-topomap h3 {
color: #fff;
}
.section h4 {
font-size: clamp(20px, 3vmin, 36px);
line-height: 1;
color: #b09953;
}
.section h5 {
font-weight: 400;
font-size: clamp(20px, 3vmin, 36px);
line-height: 1;
color: #b09953;
margin-top: clamp(40px, 6vmin, 72px);
}
.section-normal,
.section-gallery {
display: flex;
}
.section .image,
.section .gallery-wrapper {
width: 50%;
background: #b09953 url(//www.svijetgrasevine.hr/wp-content/uploads/2022/11/bg3.svg) no-repeat center center;
height: 100vh;
background-size: cover;
}
.section .gallery-wrapper {
background: #b09953;
}
@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-20px);
}
}
.gallery-mob-icon {
display: none;
position: absolute;
top: 85vw;
color: #fff;
animation: bounce 1s infinite alternate ease-in-out;
-webkit-animation: bounce 1s infinite alternate ease-in-out;
z-index: 10;
pointer-events: none;
}
.section:nth-of-type(odd) .image:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 40vh;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
z-index: 1;
}
.section .text {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.section .text > div {
position: relative;
padding: 23vh 7vw 15vh 7vw;
max-width: 700px;
width: 100%;
}
.section:nth-of-type(even) .text > div {
padding: 15vh 7vw 30vh 7vw;
}
.section-home {
align-items: flex-end;
}
.section-home h1 {
margin-bottom: 19vh;
}
.section-home .text p {
max-width: 400px;
}
.section-home .text div {
overflow: unset;
padding: 50px;
}
.text :first-child, .text div :first-child {
margin-top: 0;
}
.text p, .text ul li, .text ol li, .text a, .text p a {
font-size: clamp(16px, 1.8vmin, 32px);
}
.text p, .text ul li, .text ol li {
line-height: 1.5;
}
.text p, .text ul, .text ol {
margin: 1rem 0;
}
.text p > a, .text a {
color: #B09953;
transition: color .3s ease-in-out;
}
.text p > a:hover {
color: #000;
}
.text p:last-child {
margin-bottom: 0;
}
.section:nth-of-type(odd) .image,
.section:nth-of-type(odd) .gallery-wrapper {
order:  2;
}
.section:nth-of-type(odd) .text {
order: 1;
}
.section .contour {
position: absolute;
width: auto;
height: 60vh;
right: -1px;
transform: none;
z-index: 2;
}
.section:nth-of-type(odd) .contour {
right: auto;
left: -1px;
transform: rotateY(180deg);
}
.section-list {
display: flex;
justify-content: center;
padding: 13vh 5vw 0 5vw;
}
.section-list .list {
width: 100%;
max-width: 1000px;
}
.section-list h2 {
color: #B09953;
font-size: clamp(28px, 5vmin, 54px);
margin-bottom: 1vh;
font-weight: 600;
}
.list-single a {
color: #000;
}
.section-list .list-single {
border-bottom: 1px solid #eee;
}
.section-list .main-info {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.section-list .main-info h3 {
font-size: clamp(20px, 3vmin, 30px);
line-height: 1;
margin: 4vh 0;
font-weight: 600;
color: #000;
}
.section-list .main-info .excerpt h3 {
margin-bottom: 0;
}
.section-list .main-info .excerpt {
width: calc(100% - 5vw);
margin-bottom: 4vh;
}
.section-list .list-single .main-info .excerpt p {
margin-top: 1vh;
line-height: 1.7;
height: 100%;
max-height: 300px;
overflow: hidden;
transition: .3s all .3s ease-in-out;
}
.section-list .list-single.active .main-info .excerpt p {
max-height: 0;
margin-top: 0vh;
}
.section-list .main-info .excerpt p > span {
display: block;
color: #B09953;
margin-top: 0.5vh;
}
.section-list .main-info .toggle-extra {
display: flex;
justify-content: center;
align-items: center;
width: 2.5vw;
height: 2.5vw;
line-height: 1;
background: #d9d9d9;
color: #fff;
text-align: center;
border-radius: 50%;
transition: all 0.3s;
}
.section-list .main-info .toggle-extra img {
width: 1.2vw;
}
.section-list .list-single.active .main-info .toggle-extra {
transform: rotate(180deg);
} 
.section-list .list-single .extra-info {
display: flex;
align-items: start;
justify-content: space-between;
height: auto;
max-height: 0;
margin-bottom: 0vh;
transition: all .3s ease-in-out;
overflow: hidden;
}
.section-list .list-single.active .extra-info {
max-height: 200vh;
height: 100%;
margin-bottom: 4vh;
}
.otvorenje {
width: 50%;
text-align: right;
margin-top: 5vh;
}
.list-filters {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding-bottom: 3vh;
}
.list-filters h2 {
color: #d9d9d9;
line-height: 1;
}
.list-filters h2 a {
display: inline-block;
color: #d9d9d9;
border-radius: clamp(14px, 4vmin, 46px);
font-size: clamp(14px, 4vmin, 46px);
border: 1px solid #d9d9d9;
padding: 1vmin 3vmin;
transition: all .3s ease-in-out;
}
.list-filters h2 a:hover {
color: #B09953;
}
.list-filters h2 a.active {
border-color: #B09953;
background-color: #B09953;
color: #fff;
}
.list-filters .js-toggle-all {
display: flex;
justify-content: center;
align-items: center;
width: 2.5vw;
height: 2.5vw;
line-height: 2.5vw;
font-size: 2vw;
font-weight: bold;
background-color: #d9d9d9;
color: #fff;
text-align: center;
border-radius: 50%;
}
.extra-body {
width: 65%;
line-height: 1.7;
}
.map-link {
width: 35%;
text-align: right;
}
.map-link a {
display: inline-block;
padding: 1vh 2vh;
color: #fff;
text-transform: uppercase;
background: #147049;
font-size: 1rem;
border: 1px solid #147049;
border-radius: calc(1vh + 8px);
transition: all 0.3s;
}
.map-link a:hover {
background: #fff;
color: #147049;
}
.quote-wrapper {
position: sticky;
height: 100vh;
width: 0;
left: 0;
top: 0;
z-index: 1;
}
.quote { 
position: absolute;
bottom: 5vh;
left: 3vw;
display: flex;
min-width: 30vw;
}
.quote p {
font-size: clamp(16px, 1.8vmin, 32px);
line-height: 1.5;
}
.quote p:not(:last-child) {
margin-bottom: 30px;
}
.home .sections-wrapper .section:first-child .quote {
display: block;
}
.note-wrapper {
background: #B09953;
border-radius: 1vw;
padding: 1.5vw 2vw;
display: flex;
color: #fff;
width: auto;
max-width: 2vw;
transition: all .3s ease-in-out;
cursor: pointer;
}
.note-trigger {
font-size: 2vw;
transition: all .6s ease-in-out;
line-height: 1;
transform: translateY(0.5vw);
}
.note-wrapper.active {
max-width: 30vw;
}
.note-wrapper.active .note-trigger {
font-size: 4vw;
}
.note-text {
width: auto;
height: auto;
max-width: 0;
max-height: 0;
overflow: hidden;
transition: all .6s ease-in-out;
}
.note-text > div {
padding: 1vw;
width: 22vw;
}
.note-wrapper.active .note-text {
max-width: 25vw;
max-height: 30vh;
}
.button {
display: inline-block;
font-size: 1rem;
font-weight: 900;
text-transform: uppercase;
background: #fff;
color: #B09953;
padding: 15px 25px;
background: #fff;
border: 1px solid #fff;
border-radius: 30px;
transition: all 0.3s;
}
.button:hover {
background: #B09953;
color: #fff;
}
.appLink {
display: inline-block;
}
.appLink:first-child {
margin-right: 15px;
}
.section-map .text a {
color: #000;
transition: color .3s ease-in-out;
}
.section-map .text a:hover {
color: #B09953;
}
.map-wrapper {
position:relative;
width:50%;
height:100vh;
}
#map_canvas {
position:relative;
width:100%;
height:100%;
}
footer {
padding: 13vh 3vw 0 3vw;
}
footer ul li a:after{
background: #000;
}
footer nav {
padding-left: 4vw;
}
footer ul li:not(:last-child) {
margin-bottom: 15px;
}
footer ul li a {
font-size: 1rem;
color: #000;
}
.footer-visible .eu-bar-close {
display: none;
} .eu-bar-priority .eu-bar {
position: fixed;
bottom: 0;
width: 50%;
z-index: 10;
}
.eu-bar-priority.footer-visible .eu-bar .legal-disclaimer span,
.eu-bar .legal-disclaimer span {
display: inline;
}
.eu-bar-priority .eu-bar .legal-disclaimer span {
display: none;
}
.eu-bar .eu-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 2vw 3vw;
}
.eu-bar-priority .eu-bar .eu-wrapper {
flex-direction: column-reverse;
}
.eu-bar-priority .eu-bar.animate {
display: none;
position: unset;
width: 100%;
z-index: -1;
}
.eu-bar-priority.footer-visible .eu-bar.animate {
display: block;
z-index: 1;
}
.eu-bar-priority .eu-bar.animate .eu-wrapper {
flex-direction: row;
}
.legal-icons a {
margin-bottom: 35px;
}
.eu-bar-priority .eu-bar-close {
position: absolute;
display: none;
top: -25px;
right: 0;
justify-content: center;
align-items: center;
right: 13px;
background: #fff;
height: 40px;
width: 40px;
text-align: center;
font-size: 1.375rem;
border-radius: 50%;
z-index: 100;
} .contact-cta {
text-align: right;
flex: 0 0 35%;
}
.contact-cta h4 {
font-size: 1.5625rem;
line-height: 1.3;
font-weight: 400;
margin: 0 0 25px auto;
}
.contact-cta a {
display: inline-block;
font-size: 1rem;
color: #fff;
background: #B49946;
text-transform: uppercase;
padding: 15px 35px;
border: 1px solid #B49946;
border-radius: 35px;
transition: all 0.3s;
}
.contact-cta a:hover {
color: #B49946;
background: #fff;
}
.legal-disclaimer {
font-size: 0.9375rem;
color: #8C8C8C;
flex: 0 0 40%;
padding-right: 30px;
}
.legal-icons, .legal-icons p {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: center;
}
.legal-icons a {
display: inline-block;
}
.legal-icons img {
width: 140px;
height: auto;
}
.legal-icons a:not(:first-child) {
margin-left: 30px;
}
.dots {
position: fixed;
right: 30px;
top: 0;
height: 100vh;
width: 1.3vmin;
display: flex;
flex-direction: column;
justify-content: center;
transition: all .3s ease-in-out;
}
.dots > a {
width: 1.3vmin;
height: 1.3vmin;
display: block;
background-color: #fff;
border-radius: 50%;
text-indent: -99999px;
overflow: hidden;
margin: 10px 0;
transition: all .1s ease-in-out;
}
.list-visible .dots > a,
.even-section-bottom .dots > a {
background-color: #000;
}
.dots > a.active {
background-color: rgb(176,153,83);
}
.footer-visible .dots {
opacity: 0;
z-index: -1;
}
body:after {
content: '';
position: fixed;
left: -50%;
bottom: 0;
width: 50%;
height: 0vh;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,.8) 90%, rgba(255,255,255,0) 100%);
transition: height .6s linear;
}
body.odd-grad:after {
left: 0;
height: 10vh;
}
body.even-grad:after {
left: 50%;
height: 33vh;
}
body.footer-visible:after {
display: none;
}
.sg .marker-cluster-medium {
background-color: rgba(176,153,83,.6);
}
.sg .marker-cluster-medium div {
background-color: rgba(176,153,83,.6);
}
.sg .marker-cluster-small {
background-color: rgba(176,153,83,.6);
}
.sg .marker-cluster-small div {
background-color: rgba(176,153,83,.6);
}
.sg .marker-cluster-large {
background-color: rgba(176,153,83,.6);
}
.sg .marker-cluster-large div {
background-color: rgba(176,153,83,.6);
}
.marker-cluster div {
font-family: 'PublicSans';
color: #fff;
}
.list-item-row:before {
font-family: 'Icons';
display: inline-block;
width: clamp(26px, 2.5vmin, 52px);
color: rgb(176,153,83);
text-align: center;
margin-right: clamp(5px, 0.5vmin, 10px);
}
.list-item-address:before {
content: 'a';
}
.list-item-facebook:before {
content: 'f';
}
.list-item-instagram:before {
content: 'i';
}
.list-item-phones:before {
content: 'p';
}
.list-item-web:before {
content: 'w';
}
.list-item-email:before {
content: 'e';
}
.list-item-linkedin:before {
content: 'l';
}
.inview.image:before {
transition: all .3s ease-in-out;
opacity: 0;
transition-delay: .9s;
}
.inview-end.image:before {
opacity: 1;
}
.inview.image img.blockImage {
transform: translateY(10vh) scale(1.5);
opacity: 0;
filter: blur(30px);
transition: all .8s ease-in-out;
transition-delay: .3s;
}
.inview-end.image img.blockImage {
transform: translateY(0) scale(1);
filter: blur(0px);
opacity: 1;
}
.inview.text {
transform: translateY(10vh);
opacity: 0;
transition: all .8s ease-in-out;
transition-delay: .5s;
}
.inview-end.text {
transform: translateY(0);
opacity: 1;
}
.inview.homeintrotext {
transform: translateY(10vh);
opacity: 0;
transition: all .8s ease-in-out;
transition-delay: 1s;
}
.inview-end.homeintrotext {
transform: translateY(0);
opacity: 1;
} .gallery-wrapper {
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
.gallery {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.gallery-item {
width: calc(100% / 3);
padding-bottom: calc(100% / 3);
position: relative;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
filter: grayscale(1);
opacity: 0.3;
transition: all .3s ease-in-out;
z-index: 1;
position: absolute;
}
.gallery-item:hover img {
transform: scale(1.2);
filter: none;
opacity: 1;
z-index: 2;
}
.gallery-item.active {
height: 100vh;
width: 50vw;
position: fixed;
top: 0;
right: 0;
z-index: 3;
overflow: hidden;
}
.gallery-item.active img {
width: auto;
height: 100vh;
filter: none;
opacity: 1;
}
.gallery-item.active:hover img {
transform: scale(1);
}
.page-id-35 aside,
.page-id-1197 aside {
display: none;
}
aside .navigation-toggle {
display: none;
}
.pseudo-link { color: #b09953; } @media screen and (max-width: 1024px){
.legal-disclaimer {
flex: 0 0 35%;
}
}
@media screen and (max-aspect-ratio: 1/1) {
.section-list .main-info .toggle-extra {
width: 4vw;
height: 4vw;
}
.section-list .main-info .toggle-extra img {
width: 2.2vw;
}
aside ul .menu-item a svg {
width: 12vw;
}
aside ul li a {
padding: 10px;
}
.contact-cta h4 {
max-width: 80%;
}
footer .logo {
max-width: 20vw;
}
.footerTop {
padding-bottom: 7vw;
}
.legal-disclaimer {
flex: 0 0 30%;
}
.legal-icons a {
margin: 0 15px 20px 15px!important;
}
}
@media screen and (max-aspect-ratio: 8/10) {
.sg .leaflet-container .leaflet-control-attribution {
background: rgba(255,255,255,.1);
font-size: .66rem;
opacity: .3;
}
body:after {
display: none;
}
.navigation {
right: -100vw;
width: 100vw;
}
.header-right-side .navigation-toggle {
display: none;
}
header .logo {
top: 2vh;
left: 2vh;
height: 20vw;
width: 80vw;
filter: brightness(0%) invert(1);
transition: all .3s ease-in-out;
}
.topo-wrapper {
overflow: auto;
}
.topo-content {
position: fixed;
width: 100%;
}
.topo-content-right {
right: -100%;
}	
.topo-content-left {
left: -100%;
}
.topo-wrapper svg {
width: calc(100vh * 16/9);
}
.topo-content > div {
padding: 20vh 7vw 33vh 7vw;
}
.topo-content-left > div, .topo-content-right > div {
text-align: center;
}
.topo-content img {
max-height: 12vh;
}
.topo-content-close {
display: block;
text-align: right;
}
.eu-bar-priority .eu-bar {
bottom: 0;
width: 100%;
z-index: 10000;
}
.eu-bar-priority .eu-bar .eu-wrapper {
padding: 8vw 3vw 8vw 3vw;
}
.eu-bar-priority .eu-bar.animate .eu-wrapper, .eu-bar .eu-wrapper {
padding: 2vw 3vw 24vw 3vw;
}
.eu-bar-priority .eu-bar-close {
display: flex;
}
.eu-bar .eu-wrapper {
flex-direction: column-reverse!important;
}
.page-not-top header .logo {
filter: unset;
height: 10vh;
width: 20vh;
}
.navigation.open .header-right-side {
position: fixed;
}
.navigation-open {
overflow: hidden;
}
.header-right-side {
width: calc(100vw - 100px);
}
.main-navigation {
width: 70%;
top: 47%;
}
nav ul li a:hover::after {
width: 0%;
}
.navigation-wrapper {
padding: 0 20px;
} .socials img {
height: 17px;
}
.search-form form {
bottom: -60px;
}
.search-form form input {
height: 40px;
}
.search-form form input, .search-form form ::placeholder {
font-size: 0.875rem;
}
.search-form form button {
height: 40px;
}
.legal-disclaimer {
padding: 0;
}
aside {
width: 100%;
background: #fff;
transition: all 0.3s;
z-index: 10000;
}
aside nav {
padding: 0;
border-top: 1px solid #d1d1d1;
transition: all 0.3s;
}
aside ul {
justify-content: space-between;
}
aside nav ul li {
flex: 0 0 25%;
}
aside nav ul li:not(:last-child) {
border-right: 1px solid #d1d1d1;
}
aside ul .menu-item a svg {
width: 15vw;
transform: translateX(47%);
}
.navigation-open aside {
background: #B09953;
}
.navigation-open aside svg path {
stroke: #fff;
fill: #fff;
}
.navigation-open aside svg text {
fill: #fff;
}
.navigation-open aside nav, .navigation-open aside nav ul li:not(:last-child) {
border-color: #fff;
}
.navigation-open aside .navigation-toggle span {
background: #fff;
}
.gallery-mob-icon {
right: 40px;
font-size: 3.125rem;
}
aside ul li a {
display: block;
padding: 10px 0;
}
aside svg {
filter: unset!important;
}
aside svg path {
stroke-width: 1;
}
aside svg text {
font-size: 0.875rem;
transform: translateX(-27%);
transition: all 0.3s;
}
aside .navigation-toggle {
display: block;
margin: 0 auto;
transition: all 0.3s;
}
aside .navigation-toggle span {
background: #B09953;
}
.even-section-bottom aside ul li a:hover, aside ul li a:hover {
border-color: transparent;
}
.scroll-down aside svg text {
opacity: 0;
}
.scroll-down aside {
transform: translateY(27%);
}
.scroll-down aside .navigation-toggle {
transform: translateY(-90%);
}
.dots {
display: none;
}
.gallery-mob-icon {
display: inline-block;
}
.note-wrapper {
padding: 15px 20px 5px 20px;
max-width: unset;
}
.note-trigger {
font-size: 2.1875rem;
}
.note-wrapper.active .note-trigger  {
font-size: 2.5rem;
}
.note-wrapper.active {
max-width: 100%;
}
.note-text > div {
width: 100%;
padding: 0;
}
.note-wrapper.active .note-text {
max-width: 100%;
max-height: auto;
padding: 15px;
} .list-visible aside,
.footer-visible aside {
opacity: 1;
z-index: 99999;
}
.footer-visible .header-right-side {
z-index: 1000000;
}
.section {
min-height: auto;
}
.section.section-topomap {
margin: 0 0 30px 0;
}
.section.section-list {
padding-top: 0;
}
.section.section-list h2 {
margin-bottom: 0;
}
.section-normal, 
.section-gallery {
flex-direction: column;
}
.section .image,
.section .gallery-wrapper {
width: 100%;
}
.section .blockImage {
height: 100vw;
}
.section .image, 
.section .gallery-wrapper {
height: 100vw;
}
.section-map{
position: unset;
}
.map-wrapper {
position: unset;
width: auto;
height: 80vw;
}
.section.section-list h2 {
max-width: 90%;
}
.section .text {
width: 100%;
}	
.section .image {
position: unset;
}
.section-list .main-info h3 {
font-size: clamp(16px, 3vmin, 30px);
margin: 2.5vh 0;
}
.section-list .main-info .toggle-extra {
width: 5vw;
height: 5vw;
}
.section-list .main-info .toggle-extra img {
width: 3vw;
}
.section .contour {
height: 80vw;
right: 0;
}
.legal-icons, .legal-icons p {
justify-content: center;
}
.list-filters .js-toggle-all {
width: 5vw;
height: 5vw;
font-size: 5vw;
}
.section:nth-of-type(odd) .contour {
right: 0;
left: auto;
transform: none;
}
.section-list .list-single .extra-info {
display: block;
}
.sections-wrapper .section-list {
padding-bottom: 5vh;
}
.extra-body {
width: 100%;
}
.map-link {
width: auto;
text-align: left;
margin-top: 2vh;
}
.map-link a {
font-size: 0.875rem;
}
.quote-wrapper {
position: unset;
height: auto;
left: auto;
top: auto;
width: auto;
padding-top: 1vh;
order: 3;
}
.quote {
position: relative;
left: auto;
bottom: auto;
min-width: auto;
margin: -3vh 5vw 5vh;
}
.appLink:first-child {
margin-right: 10px;
}
.appLink img {
height: 40px;
}	
.section h1, .section h2 {
margin-bottom: 3vh;
max-width: 100%;
}
.home .sections-wrapper .section:first-child h1 {
margin-bottom: 2vh;
}
.home .sections-wrapper .section:first-child h1 {
font-size: clamp(45px, 9vmin, 100px);
}
.section-list .list-single.active .extra-info {
max-height: 100%;
}
.section .text > div, .section:nth-of-type(even) .text > div {
padding: 10vw 5vw 10vw 5vw;
}
.section.section-topomap .topo-content.text > div, .section.section-topomap:nth-of-type(even) .topo-content.text > div {
padding: 0 5vw 25vw 5vw;
}
.section:nth-of-type(odd) .image,
.section:nth-of-type(odd) .gallery-wrapper {
order:  1;
}
.section:nth-of-type(odd) .image:before {
content: none;
}
.section:nth-of-type(even) .image:before {
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}
.button {
font-size: 0.875rem;
background: #B09953;
border: 1px solid #B09953;
color: #fff;
}
.button:hover {
background: #fff;
color: #B09953;
}
.contact-cta {
text-align: left;
padding-top: 40px;
}
.contact-cta h4 {
max-width: 100%;
margin: 0 0 15px 0;
}
.legal-disclaimer {
text-align: center;
flex: 0 0 100%;
}
.legal-icons {
text-align: center;
}
footer {
padding: 3vw 5vw 0 5vw;
}	
.footerTop {
padding-bottom: 45px;
}
footer nav {
padding: 30px 0 0 0;
}
footer .logo {
max-width: 40vw;
}
.flex-mob-column {
flex-direction: column;
}
.gallery-item.active {
height: 100vw;
width: 100vw;
}
.gallery-item.active img {
width: 100vw;
height: 100vw;
}
.page-id-35 aside,
.page-id-1197 aside {
display: block;
}
}
@media screen and (max-aspect-ratio: 6/10) {
aside ul .menu-item a svg {
width: 22vw;
transform: translateX(24%);
}
.main-navigation {
width: 80%;
}  .eu-bar-priority .eu-bar.animate .eu-wrapper, .eu-bar .eu-wrapper {
padding: 2vw 3vw 35vw 3vw;
}
.header-right-side {
right: 20px;
width: calc(100vw - 40px);
}
.small-navigation ul li a, .lang a {
font-size: 0.875rem;
}
.scroll-down aside .navigation-toggle {
transform: translateY(-70%);
}
.search-form form input {
width: 160px;
}
.extra-body, .extra-body a {
font-size: 0.875rem;
}
.gallery-mob-icon {
right: 20px;
bottom: 20px;
font-size: 2.125rem;
}
.legal-icons img {
width: 120px;
}
.contact-cta h4 {
font-size: 1.375rem;
}
.legal-icons a {
margin-bottom: 30px;
}
.legal-disclaimer {
font-size: 0.875rem;
}
.contact-cta a {
font-size: 0.875rem;
padding: 10px 25px;
}
footer {
padding: 3vw 5vw 0 5vw;
}	
footer ul li a {
font-size: 0.875rem;
}
footer ul li:not(:last-child) {
margin-bottom: 7px;
}
}
@media screen and (max-width: 320px) {
.main-navigation .sub li a {
font-size: 12px !important;
} .main-navigation ul li a {
font-size: 14px;
} .main-navigation ul li:not(:last-child) {
margin-bottom: 22px;
}
}
@font-face {
font-family: 'PublicSans';
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.eot);
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.eot) format('embedded-opentype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.woff2) format('woff2'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.woff) format('woff'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.ttf) format('truetype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBlack.svg#PublicSansBlack) format('svg');
font-weight: 900
}
@font-face {
font-family: 'PublicSans';
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.eot);
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.eot) format('embedded-opentype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.woff2) format('woff2'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.woff) format('woff'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.ttf) format('truetype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansBold.svg#PublicSansBold) format('svg');
font-weight: 700
}
@font-face {
font-family: 'PublicSans';
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.eot);
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.eot) format('embedded-opentype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.woff2) format('woff2'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.woff) format('woff'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.ttf) format('truetype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansSemiBold.svg#PublicSansSemiBold) format('svg');
font-weight: 600
}
@font-face {
font-family: 'PublicSans';
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.eot);
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.eot) format('embedded-opentype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.woff2) format('woff2'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.woff) format('woff'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.ttf) format('truetype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/PublicSansRegular.svg#PublicSansRegular) format('svg');
font-weight: 400
}
@font-face {
font-family: 'Icons';
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.eot);
src: url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.eot) format('embedded-opentype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.woff2) format('woff2'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.woff) format('woff'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.ttf) format('truetype'),
url(//www.svijetgrasevine.hr/wp-content/themes/svijet-grasevine/assets/fonts/icons.svg#icons) format('svg');
font-weight: 900
}