/*-------------------------------------------------------------------------- 
[Master Stylesheet] 
 
Project:		Tesarstvo Hribar     
Version:		1.00 
Last change:	10/22/26 
--------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
.scroll-margin-top { scroll-margin-top: 100px; }

@media only screen and (max-width : 800px) {
	.scroll-margin-top { scroll-margin-top: 76px; }
}

body { color: #231f20;  font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 20px; }

.hero h1:nth-of-type(1) { color: #ffffff; font-size: 80px; font-weight: 600; letter-spacing: -.2rem; line-height: 1.15; }
.hero h1 > span { display: block; }

p { line-height: 1.6; padding-top: 1.5em; }

ul, ol { padding-top: 1.5em; }
li { line-height: 1.6; }

a:link, a:visited { color: #ed1c24; text-decoration: none; }
a:hover { text-decoration: none; }

img { display: block; }
a img { border: 0; }

.main { background: url('img/bg.jpg') center center no-repeat fixed; background-size: 95% auto; }

.buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
.buttons--row { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 100px; }
.buttons--row-hero { margin-top: 75px; gap: 58px; }
.buttons--hero { gap: 1rem; }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85em 1.5em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	position: relative;
	z-index: 1;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.button--primary::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(-100% + 4px);
	height: 100%;
	width: 100%;
	background-color: #ED1C24;
	transform: translateX(0);
	transition: transform 0.4s ease;
}
.button--hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(-100% + 4px);
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	transform: translateX(0);
	transition: transform 0.4s ease;
}
.button--primary:link,
.button--primary:visited { color: #231f20; background-color:rgba(0, 0, 0, 0.075); transition: color 0.4s ease !important; }

.button--hero:link,
.button--hero:visited { color: #ffffff; background-color:rgba(0, 0, 0, 0.20); transition: color 0.4s ease !important; }

.button--primary:hover { color: #ffffff; }
.button--hero:hover { color: #231f20; }

.button--primary:hover::before { transform: translateX(calc(100% - 4px)); }
.button--hero:hover::before { transform: translateX(calc(100% - 4px)); }

@media (max-width: 390px) {
	.buttons--hero,
	.buttons--row { flex-direction: column; align-items: stretch; }
	.buttons--hero .button,
	.buttons--row .button { width: 100%; }
}

.gallery-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 10px;
	height: 90vh;
	height: 768px;
	min-height: 400px;
	padding: 0 10px 10px;
}
.right-grid {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    min-height: 0;
}
.grid-row { display: grid; gap: 10px; min-width: 0; min-height: 0; }
.top-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bottom-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #c3c3c3; }
.tile img,
.tile video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media only screen and (max-width : 1152px) {
	.top-row { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.25fr); }
	.bottom-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); }
}
@media only screen and (max-width : 1024px) {
  	.gallery-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		height: auto;
		min-height: auto;
		padding-bottom: 0;
  	}
	.tile-1 { aspect-ratio: 16 / 9; display: none; }
	.right-grid {
		grid-template-rows: repeat(2, minmax(0, 1fr));
		height: clamp(280px, 55vw, 480px);
		height: 550px;
		height: auto;
	}
	.top-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.bottom-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.right-grid .tile {  aspect-ratio: 4 / 3; }
}

.contact-links { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 100px; color: #ffffff; font-weight: 600; }
.contact-links a { color: #ffffff; 	 display: inline-block;  text-decoration: none;  position: relative; z-index: 1; overflow: hidden; }
.contact-links a:not(.contact-links__phone-link) { background-color:rgba(255, 255, 255, 0.15); padding: 0.85em 1.5em; transition: transform 0.4s ease; }

.contact-links a:not(.contact-links__phone-link)::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(-100% + 56px);
	left: calc(-100% + 4px);
	height: 100%;
	width: 100%;
	background-color: #ED1C24;

	transform: translateX(0);
	transition: transform 0.4s ease;
}

.contact-links a:hover::before { transform: translateX(calc(100% - 4px)); }

@media only screen and (max-width : 800px) {
	.contact-links a:hover::before,
	.button--primary:hover::before,
	.button--hero:hover::before { transform: none; }
	.button--primary:hover,
	.button--hero:hover { color: inherit; }
}

.contact-links__item:link,
.contact-links__item:visited,
.contact-links__phone-link:link,
.contact-links__phone-link:visited; { text-decoration: none; color: #ffffff; }

.contact-links__phone { font-size: 36px; }
.contact-links .contact-links__phone-link { display: none; }

@media (max-width: 1024px) {
	.contact-links .contact-links__phone-text { display: none; }
	.contact-links .contact-links__phone-link { display: inline-block; }
}

/* ========================================
   HEADER
======================================== */

:root {
  --header-height: 80px;
  --header-height: 100px;
  --header-background: #ffffff;
  --header-background: rgba(255, 255, 255, 0.90);
  --header-text: #231f20;
  --header-transition: 0.3s ease;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--header-height);
	padding: 0 10%;
	background-color: transparent;
	color: #ffffff;

	transition: background-color var(--header-transition), color var(--header-transition);
}

/* Header po prehodu v .main */
.site-header.is-scrolled { background-color: var(--header-background); color: var(--header-text); box-shadow: 0 0 100px rgba(0,0,0,0.15); }

.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { display: block; width: 150px; height: auto; max-width: 100%; }

/* NAVIGACIJA */

.site-header__nav { height: 100%; }

.site-nav,
.site-nav__dropdown { margin: 0; padding: 0; list-style: none; }

.site-nav { display: flex; align-items: center; gap: 2em; height: 100%; }

.site-nav__item { position: relative; height: 100%; }

.site-nav .site-nav__item > a { display: flex; align-items: center; height: 100%; }

.site-nav a { display: block; color: inherit; text-decoration: none; transition: color 0.15s, background-color 0.15s; transition: none; }
.site-nav a:hover { color: #ED1C24; }

/* DROPDOWN - vedno svetel */

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.90);
  color: #231f20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.site-nav__dropdown a { padding: 0.65em 1em; color: #231f20; }

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus-visible { background-color: #ED1C24; color: #ffffff; }

/* Odprtje dropdowna z miško ali tipkovnico */

.site-nav__item--dropdown:hover > .site-nav__dropdown,
.site-nav__item--dropdown:focus-within > .site-nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.site-header__toggle {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-header__toggle span {
  position: absolute;
  left: 7px;
  width: 26px;
  height: 2px;
  background-color: currentColor;

  transition:
    top 0.25s ease,
    transform 0.25s ease;
}

.site-header__toggle span:first-child { top: 15px; }
.site-header__toggle span:last-child { top: 23px; }

.site-header__toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

.site-nav__company-info { display: none; }

/* ========================================
   MOBILE
======================================== */

@media (max-width: 1000px) {
	:root { --header-height: 76px; }

	.site-header { padding: 0 1.25rem; }
	.site-header__logo img { width: 125px; }
	.site-header__toggle { display: block; flex-shrink: 0; }

  .site-header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;

    width: 100%;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));

    padding: 1.5rem 1.25rem 2rem;

    overflow-y: auto;
    overscroll-behavior: contain;

    background-color: #ffffff;
    color: #231f20;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;

transition: opacity 0.25s ease;

  }

	.site-header.is-menu-open .site-header__nav { opacity: 1; visibility: visible; pointer-events: auto; }

	.site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; height: auto; }
	.site-nav__item > a { padding: 0.6em 0; font-weight: 600; }
	.site-nav__item a:hover { color: inherit;  }

	.site-nav__dropdown {
		position: static;
		min-width: 0;
		padding: 0 0 0.75em 1.5em;
		background-color: #ffffff;
		color: #231f20;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
	.site-nav__dropdown a { padding: 0.5em 0; }
	.site-nav__dropdown a:hover,
	.site-nav__dropdown a:focus-visible {background-color: transparent; color: inherit; }

	.site-header:not(.is-menu-open) .site-nav__dropdown { display: none; }

	body.menu-open { overflow: hidden; }

	.site-nav__company-info { display: block; padding: 2rem 1.25rem 2rem; background-color: #231f20; margin: 0.9em -1.25rem -2rem; }

	.site-nav__company-info > p { padding-top: 0; }

	.site-nav__company-info .company-info__phone-link:link, 
	.site-nav__company-info .company-info__email-link:link, 
	.site-nav__company-info .company-info__phone-link:visited,
	.site-nav__company-info .company-info__email-link:visited { color: #ffffff; }

	.site-nav__company-info .company-info__phone-link > span { color: #978F91; }



}

/* Uporabniki, ki imajo raje manj animacij */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__nav,
	.site-header__toggle span,
	.site-nav__dropdown { transition: none; }
}

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 10px 10px; }

.process-grid-3 { grid-template-columns: repeat(3, 1fr); }

.process-item {	background-color: rgba(0,0,0,0.075); padding: 36px; display: flex; flex-direction: column; justify-content: center; }

/*
.process-item p { margin: 0 0 20px; font-size: 36px; line-height: 1; font-weight: 700; padding-top: 0; display: none; }
*/

.process-item span { line-height: 1.6; font-weight: 600; padding-top: 0.75em; font-size: 20px; }
.process-item img { width: auto; height: auto; align-self: flex-start; width: 65px; }

.process-item span + p { padding-top: 0; }







.service-nav { display: flex; flex-wrap: wrap; gap: 0 10px; }
.service-nav a { text-decoration: none; }
.service-nav a:hover { color: #ED1C24; }

.service-nav .service-nav__link { color: #a5a5a5; }
.service-nav .service-nav__link.active { color: #231f20; }

/* HERO: vedno čez celotno širino */
.hero { position: relative; z-index: 3; width: 100%; overflow: hidden; background: #231f20; color: #fff; }

.hero::after {
	content: '';
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.50);
}
.hero--fullscreen { height: 100vh; height: 100svh; }
.hero--compact { height: auto; }

.hero__background { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;  }

/*
.cta-section { position: relative; isolation: isolate; overflow: hidden; background-color: #231f20; }
.cta-section__overlay { position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.75); }
.cta-section__inner { position: relative; z-index: 1; }
*/

.hero--tesarstvo {
	background: url('img/bg-tesarstvo.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--krovstvo {
	background: url('img/bg-krovstvo.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--kleparstvo {
	background: url('img/bg-kleparstvo.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--ostresja {
	background: url('img/bg-kleparstvo.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--nadstreski {
	background: url('img/bg-nadstreski.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--kozolci {
	background: url('img/bg-kozolci.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--brunarice {
	background: url('img/bg-brunarice.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--skeletne-hise {
	background: url('img/bg-skeletne-hise.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--default {
	  background: url('img/bg-storitev.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero--3d-izris-ostresij {}
.hero--razrez-lesa {}
.hero--impregnacija-lesa {}

.hero__media { position: absolute; z-index: 1; inset: 0; }
.hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero__content {
	position: relative;
	z-index: 3;
	width: 80%;
	max-width: 1600px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding-bottom: 75px
}

.hero--fullscreen .hero__content { min-height: 100vh; min-height: 100svh; }
.hero--compact .hero__content { padding-top: 250px; }

.scroll-arrow {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 42px;
	width: 24px;
    height: 24px;
    transform: translateX(-50%);
    animation: scrollArrow 1.75s cubic-bezier(.4,0,.2,1) infinite;
}
.scroll-arrow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

@keyframes scrollArrow {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(32px);
    }
}

@media only screen and (max-width : 800px) {
	.scroll-arrow { bottom: 28px; }

	@keyframes scrollArrow {
	    0%, 100% {
	        transform: translateX(-50%) translateY(0);
	    }

	    50% {
	        transform: translateX(-50%) translateY(16px);
	    }
	}
}

.hero__content h1,
.hero__content-txt {
    opacity: 0;
    transform: translateY(50px);
    animation: heroFadeUp .8s ease forwards;
}
.hero__content.is-fixed h1 {
    opacity: 1;
    transform: none;
    animation: none;
}
.hero__content .buttons > span {
    opacity: 0;
    transform: translateX(50px);
    animation: heroFadeLeft .8s ease forwards;
}

.hero__content h1 { animation-delay: 0s; }
.hero__content .hero__content-txt { animation-delay: .15s; }
.hero__content .buttons > span:nth-of-type(1) { animation-delay: .15s; }
.hero__content .buttons > span:nth-of-type(2) { animation-delay: .30s; }

.hero__content .hero__content-txt + .buttons > span:nth-of-type(1) { animation: heroFadeUp .8s ease forwards; animation-delay: .30s; }

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heroFadeLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wide-section { width: 100%; max-width: 1920px; margin-inline: auto; }
.site-footer__inner { width: 80%; max-width: 1600px; margin-inline: auto; }

.text-section { width: 100%; padding-block: 125px; }
.text-section--bg { background-color: rgba(0,0,0,0.075);

/*
	background: url('https://tesarstvohribar.si/wp-content/uploads/2026/10/image00001.jpg') center center no-repeat;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
*/


 }

.text-section__inner { width: 80%; max-width: 1600px; margin-inline: auto; }
.text-section__inner > :first-child { margin-top: 0; }
.text-section__inner > :last-child { margin-bottom: 0; }
.text-section__inner > video { width: 100%; height: auto; }

.video-section__inner { padding: 0 10px 10px; }
.video-section__inner > video { width: 100%; height: auto; display: block;  }

.section__heading { width: 60%; max-width: 100%; }
.section__heading h2 { margin: 0; font-size: 56px; font-weight: 600; letter-spacing: -.1rem; line-height: 1.15; }

.section__content { width: calc(50% - 100px); margin-left: calc(50% + 100px); padding-top: 100px; }
.section__content > :first-child { padding-top: 0; margin-top: 0; }
.section__content > :last-child { margin-bottom: 0; }

.section__content--full { width: 100%; margin: 0; }

.cta-section {
	color: #ffffff;
	/* background: #231f20 url('img/bg-image00027.jpg') center center no-repeat; */
	width: 100%;
	padding-block: 125px;
}

.cta-section__inner { width: 80%; max-width: 1600px; margin-inline: auto; }

.cta-section { position: relative; isolation: isolate; overflow: hidden; background-color: #231f20; }
.cta-section__background { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cta-section__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: grayscale(100%); }
.cta-section__overlay { position: absolute; inset: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.75); }
.cta-section__inner { position: relative; z-index: 1; }

.cta-section__background video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }

.cta-section__actions { margin-top: 32px; }
.cta-section__actions a { display: inline-block; }

.site-footer { width: 100%; padding-block: 75px; }

/*
.site-footer__facebook { display: block; margin-top: 1.5em;  }
.site-footer__facebook > svg { width: 36px; height: auto; fill: #231f20; }
*/

.site-footer__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 80%; margin: 75px auto 0;  }

.site-footer__phone-link { display: none; }

.site-footer__phone { margin: 1.5em 0 8px; }
.site-footer__phone > a,
.site-footer__phone > span { font-size: 36px; font-weight: 600;  }

.site-footer ul { padding-left: 0; list-style-type: none; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: #ED1C24; }
/* .site-footer a:not(.site-footer__phone-link), */
.site-footer ul a { color: #ED1C24; text-decoration: none; }
.site-footer h3 {  }

.site-footer .site-footer__bottom p { padding-top: 0; }
.site-footer .site-footer__bottom a { color: #231f20; }

.site-footer h3,
.site-footer .site-footer__bottom p,
.site-footer .site-footer__bottom a,
.site-footer .company-item__phone-text > span,
.site-footer .company-item__phone-link > span { /* color: #B1AAAC; */ color: #a5a5a5; }

.site-footer .site-footer__bottom a:hover { color: #231f20; }

.site-footer ul > li,
.site-footer__contact > p { line-height: 1.8; }

.social-icons { display: flex; align-items: center; gap: 18px; margin-top: 1.5em; }
.social-icons a { display: flex; align-items: center; justify-content: center;width: 40px; height: 40px; }

.social-icons a svg { display: block; width: 100%; height: 100%; fill: #231f20; }
.social-icons a:hover svg { fill: #ED1C24; }

@media (max-width: 1024px) {
  	.site-footer__phone-text { display: none; }
	.site-footer__phone-link { display: inline; }
}
@media (max-width: 1000px) {
	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px; }
	.site-footer__bottom { flex-wrap: wrap; }
	.site-footer__bottom { margin: 55px auto 0; }
}
@media (max-width: 600px) {
	.site-footer__inner { grid-template-columns: 1fr; } 
	.site-footer__bottom { display: block; }
	.site-footer__bottom p,
	.site-footer__bottom a { line-height: 1.8; }
}

.gallery-grid,
.process-grid { width: 100%; }

.service-tabs { display: flex; flex-wrap: wrap; gap: 0 10px; }

.service-tab {
	appearance: none;
	border: 0;
	background: none;
	color: #a5a5a5;
	font: inherit;
	font-size: inherit;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.service-tab:hover { color: #ed1c24; }
.service-tab.active { color: #231f20; }

.service-panel p { margin-top: 0; padding-top: 0; }

.service-tabs {font-size: 56px; font-weight: 600; letter-spacing: -.1rem; line-height: 1.15;  width: 65%;}
.service-tab { font-size: 56px; font-weight: 600; letter-spacing: -.1rem; line-height: 1.15; padding: 0; }
.service-panel {padding-left: calc(50% + 100px);  padding-top: 100px;}

/*--------------------------------------------------------------------------
# Animation
*/

.animated-section { overflow: hidden; }

.service-panel,
.service-tabs,
.section__heading,
.section__content,
.section__content--wide {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .8s ease, transform .8s ease;
}
.company-item,
.process-item,
.buttons--row > span,
.contact-links > .contact-links-span {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity .8s ease, transform .8s ease;
}

.section__heading.is-fixed { opacity: 1; transform: none; }

.service-tabs.is-visible,
.service-panel.is-visible,
.section__heading.is-visible,
.section__heading.is-not-animated,
.section__content.is-visible,
.section__content--wide.is-visible { opacity: 1; transform: translateY(0); }

.company-item.is-visible,
.process-item.is-visible,
.buttons--row > span.is-visible,
.contact-links > .contact-links-span.is-visible { opacity: 1; transform: translateX(0); }

.service-tabs,
.section__heading { transition-delay: 0s; }

.service-panel,
.section__content,
.section__content--wide { transition-delay: .15s; }

.buttons--row > span:nth-of-type(1) { transition-delay:   0s; }
.buttons--row > span:nth-of-type(2) { transition-delay: .15s; }
.buttons--row > span:nth-of-type(3) { transition-delay: .30s; }
.buttons--row > span:nth-of-type(4) { transition-delay: .45s; }
.buttons--row > span:nth-of-type(5) { transition-delay: .60s; }

.process-item:nth-of-type(1) { transition-delay:   0s; }
.process-item:nth-of-type(2) { transition-delay: .15s; }
.process-item:nth-of-type(3) { transition-delay: .30s; }
.process-item:nth-of-type(4) { transition-delay: .45s; }

.process-item:nth-of-type(5) { transition-delay:   0s; }
.process-item:nth-of-type(6) { transition-delay: .15s; }
.process-item:nth-of-type(7) { transition-delay: .30s; }
.process-item:nth-of-type(8) { transition-delay: .45s; }

.process-grid-3 .process-item:nth-of-type(1) { transition-delay:   0s; }
.process-grid-3 .process-item:nth-of-type(2) { transition-delay: .15s; }
.process-grid-3 .process-item:nth-of-type(3) { transition-delay: .30s; }

.process-grid-3 .process-item:nth-of-type(4) { transition-delay:   0s; }
.process-grid-3 .process-item:nth-of-type(5) { transition-delay: .15s; }

.company-item:nth-of-type(1) { transition-delay:   0s; }
.company-item:nth-of-type(2) { transition-delay: .15s; }
.company-item:nth-of-type(3) { transition-delay: .30s; }

.contact-links > .contact-links-span:nth-of-type(1) { transition-delay:   0s; }
.contact-links > .contact-links-span:nth-of-type(2) { transition-delay: .15s; }
.contact-links > .contact-links-span:nth-of-type(3) { transition-delay: .30s; }

.animated-section.no-animation .company-item,
.animated-section.no-animation .process-item,
.animated-section.no-animation .contact-links > .contact-links-span,
.animated-section.no-animation .buttons--row > span,
.animated-section.no-animation .section__heading,
.animated-section.no-animation .section__content,
.animated-section.no-animation .service-tabs,
.animated-section.no-animation .service-panel { opacity: 1;	transform: none; transition: none; }

/*--------------------------------------------------------------------------
# Contact Form
*/

.field-wrap { margin: 1.5em 0 0; }
.field-wrap-full { width: 100%; }

.field-wrap_flex { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.field-wrap_flex > .field-wrap { width: 31%; }

@media only screen and (max-width : 1000px) {
	.field-wrap_flex > .field-wrap { width: 100%; }
}

.submit {
    line-height: 1.2;
    text-decoration: none; 
    margin: 1.5em 0 0;
    border: none;
    display: block;
    position: relative;
    appearance: none;
    -moz-appearance: none; 
    -webkit-appearance: none; 
    background-color: rgba(0, 0, 0, 0.075);
    color: #231f20;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
    min-width: 15.5%;
}
.submit:hover { cursor: pointer; color: #ffffff; }


@media (max-width: 500px) {
	.submit { min-width: 50%; }
}

.submit > span {
	display: block;
	position: relative;
	z-index: 1;
	overflow: hidden;
	
	padding: 0.85em 1.5em;
}
.submit > span::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: calc(-100% + 4px);
	height: 100%;
	width: 100%;
	background-color: #231f20;
	transform: translateX(0);
	transition: transform 0.4s ease;
}
.submit > span:hover::before { transform: translateX(calc(100% - 4px)); }

@media (max-width: 768px) {
	.submit:hover { color: inherit; }
	.submit > span:hover::before { transform: none; }
}

.submit_wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

.label { padding: 0 0 0.35em; display: inline-block; }

.input-text {
    outline: none;
    width: 100%;
    line-height: 18px;
    border: none;
    padding: 11px 10px;
    text-align: left;
    box-sizing: border-box;
}
.input-text:nth-of-type(2) { display: none; }

.input-select {
    outline: none;
    width: 100%;
    line-height: 18px;
    padding: 13px 9px;
    text-align: left;
    box-sizing: border-box;
}
.input_area {
    outline: none;
    width: 100%;
    line-height: 18px;
    padding: 11px 10px;
    text-align: left;
    height: 250px;
    box-sizing: border-box;
}
.input-select,
.input_area,
.input-text { border: 1px solid #231f20; background: transparent; color: #231f20; transition: background 0.2s ease; }

.input-select:focus,
.input_area:focus,
.input-text:focus { background: #ffffff; }

/* Chrome/Opera/Safari */
/* Firefox 19+ */
/* IE 10+ */
/* Firefox 18- */
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder { color: #231f20; opacity: 1; }

.contactform { margin: 1.5em auto 0; }

.submit, .label, .input-text, .input-select, .input-select option, .input_area { font-family: "Manrope", sans-serif; font-weight: 400; font-style: normal; font-size: 20px; }
.label, .submit { font-weight: 700; }

/*
.company-info { width: calc(100% - 20px); background-color: rgba(0,0,0,0.075); margin: 0 10px 10px; box-sizing: border-box; }
.company-info__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	width: 80%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 75px 0;
}
.company-info__col { min-width: 0;	 }
.company-info__col > p:nth-of-type(1) { padding-top: 0; }
.company-info__col:nth-of-type(3) {  text-align: right;  }

.company-info__col a { overflow-wrap: anywhere; }
*/

/* Telefonske številke: desktop */
.company-info__phone-link { display: none; }

.company-info__phone-text, 
.company-info__phone-link:link,
.company-info__phone-link:visited { font-size: 36px; font-weight: 600; line-height: 1.25; text-decoration: none; color: inherit; margin-bottom: 1.5rem; }

.company-info__phone-text { display: block; }
.company-info__phone-text > span { font-size: 20px; font-weight: normal; display: block; }

.company-info__email-link:link,
.company-info__email-link:visited { color: #ED1C24; text-decoration: none; }

.company-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 10px 10px; }

.company-item {	background-color: rgba(0,0,0,0.075); padding: 36px; display: flex; flex-direction: column; justify-content: flex-start; }
.company-item p { padding-top: 0; }

.company-item__phone-text { display: block; }

.company-item__phone-text, 
.company-item__phone-link:link,
.company-item__phone-link:visited {  font-weight: 600;  text-decoration: none; color: inherit; }

.company-item__phone-link > span { font-weight: normal; }

.company-item__email-link:link,
.company-item__email-link:visited { color: inherit; text-decoration: none; font-weight: 600; }

.company-item__phone-text > span { font-weight: normal; }

.company-item__phone-link { display: none; }

@media (max-width: 1152px) {
	.company-info__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px; }
	.company-info__col:nth-of-type(3) { text-align: left; }
	.company-info__phone-text { display: none; }
	.company-info__phone-link { display: block; }
	.company-item__phone-text { display: none; }
	.company-item__phone-link { display: block; }


	.company-info__phone-link > span { font-size: 20px; font-weight: normal; display: block; }
}
@media (max-width: 600px) {
	.company-info__inner { grid-template-columns: 1fr; gap: 25px; }
}

.lightgallery { margin: 0 auto 0; padding: 0 10px 10px; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lightgallery > a { display: flex; flex-direction: column; justify-content: center; }
.lightgallery > a > img { width: 100%; }

.gallery-section { padding: 0 10px 10px; }

/*--------------------------------------------------------------------------
#gallery
*/

/*--------------------------------------------------------------------------
#various
*/

.bold, strong { font-weight: 600; }

.tiskane { text-transform: uppercase; }
.capped { font-variant: small-caps; }

.align-center { text-align: center; }
.align-right { text-align: right; }

.block_za_samostojno_montazo,
.block_lesenih_konstrukcij_po_meri { display: block; }

@media only screen and (max-width : 1920px) {
	.wrap_outer { width: 100%; }
}
@media only screen and (max-width : 1680px) {
	.site-header { padding: 0 5%; }
	.hero__content,
	.site-footer__inner,
	.cta-section__inner,
	.text-section__inner,
	.site-footer__bottom,
	.company-info__inner { width: 90%; }
	.cta-section,
	.text-section { padding-block: 100px; }
}	
@media only screen and (max-width : 1600px) {
	body,
	.submit, .label, .input-text, .input-select, .input-select option, .input_area { font-size: 18px; }
	.hero h1:nth-of-type(1) { font-size: 64px; letter-spacing: -.1rem; line-height: 1.15; }
	.hero__content { padding-bottom: 52px; }
	.buttons--row-hero { margin-top: 52px; gap: 52px; }
	.process-item img { width: 55px; }
}	
@media only screen and (max-width : 1440px) {}	
@media only screen and (max-width : 1440px) {
	.service-tab,
	.service-tabs,
	.section__heading h2 { font-size: 48px; letter-spacing: -0.1rem; line-height: 1.25; }
}	
@media only screen and (max-width : 1366px) {}	
@media only screen and (max-width : 1280px) {
	.hero h1:nth-of-type(1) { font-size: 56px; letter-spacing: -.1rem; line-height: 1.15; }
	.service-tab,
	.service-tabs,
	.section__heading h2 { font-size: 40px; letter-spacing: -0.1rem; line-height: 1.25; }
	.service-nav,
	.service-tabs { gap: 0 6px; }
	.cta-section,
	.text-section { padding-block: 75px; }
	.contact-links,
	.buttons--row { margin-top: 75px; }
	.section__content { width: calc(50% - 75px); margin-left: calc(50% + 75px); padding-top: 75px; }
	.section__content--full { width: 100%; margin: 0; }
	.service-panel { padding-left: calc(50% + 75px); padding-top: 75px; }
	.process-item { padding: 30px 30px 24px; }
}	
@media only screen and (max-width : 1152px) {
	.contact-links,
	.buttons--row { margin-top: 55px; }
	.section__content { width: calc(50% - 55px); margin-left: calc(50% + 55px); padding-top: 55px; }
	.section__content--full { width: 100%; margin: 0; }
	.service-panel { padding-left: calc(50% + 55px); padding-top: 55px; }
	.site-footer__company img { width: 150px; }
	.site-footer { padding-block: 75px 35px; }
	.company-info__inner { padding: 55px 0; }
}	
@media only screen and (max-width : 1024px) {
	/*
	.gallery-grid { height: auto; min-height: 600px; }
	*/
	.service-panel { padding-left: 50%; }
	.section__content { width: 50%; margin-left: 50%; }
	.section__content--full { width: 100%; margin: 0; }
  	.main { background: #ffffff; }
}	
@media only screen and (max-width : 1000px) {
	.buttons--row { gap: 10px; justify-content: flex-start; }
	.buttons--row > span { width: calc((100% - 20px) / 3); }
	.buttons--row > span > a { display: block; }
	.process-grid { grid-template-columns: repeat(2, 1fr); }
	.company-grid { display: grid; grid-template-columns: repeat(1, 1fr); }
	.process-item:nth-of-type(2),
	.process-item:nth-of-type(4),
	.process-item:nth-of-type(6),
	.process-item:nth-of-type(8) { transition-delay: .30s; }
	.process-item:nth-of-type(1),
	.process-item:nth-of-type(3),
	.process-item:nth-of-type(5),
	.process-item:nth-of-type(7) { transition-delay: .15s; }

	.process-grid-3 .process-item:nth-of-type(2),
	.process-grid-3 .process-item:nth-of-type(4) { transition-delay: .30s; }
	.process-grid-3 .process-item:nth-of-type(1),
	.process-grid-3 .process-item:nth-of-type(3),
	.process-grid-3 .process-item:nth-of-type(5) { transition-delay: .15s; }

	.company-item:nth-of-type(1),
	.company-item:nth-of-type(2),
	.company-item:nth-of-type(3) { transition-delay: .15s; }
}	
@media only screen and (max-width : 900px) {
	.service-panel { padding-left: 0; }
	.section__content { width: 100%; margin-left: 0; }
	.section__content--full { width: 100%; margin: 0; }
	.service-tabs,
	.section__heading { width: 85%; }
}	
@media only screen and (max-width : 800px) {
	.contact-links { flex-wrap: wrap; gap: 0; }
	.contact-links-span { display: block; }
	.contact-links-span:nth-of-type(1) { order: 2; width: 100%; margin: 0.25em 0 0; }
	.contact-links-span:nth-of-type(2) { order: 1; width: 100%; }
	.contact-links-span:nth-of-type(3) { order: 0; margin-bottom: 54px; }
	.contact-links-span:nth-of-type(1) > a { padding: 0; background: transparent; }
	.contact-links-span:nth-of-type(1) > a::before { display: none; }
	.contact-links__phone { line-height: 1.2; }
	.contactform { margin-top: 0.5em; }
}	
@media only screen and (max-width : 768px) {
	body,
	.submit, .label, .input-text, .input-select, .input-select option, .input_area { font-size: 20px; }
	.service-tabs,
	.section__heading { width: 100%; }
	.cta-section,
	.text-section { padding-block: 55px; }
	.contact-links > .contact-links-span:nth-of-type(1),
	.contact-links > .contact-links-span:nth-of-type(2),
	.contact-links > .contact-links-span:nth-of-type(3) { transition-delay: .15s; }

	.block_za_samostojno_montazo,
	.block_lesenih_konstrukcij_po_meri { display: inline; }
}	
@media only screen and (max-width : 700px) {
	.lightgallery { grid-template-columns: repeat(3, 1fr); }
	.company-info__inner { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 55px; }
}	
@media only screen and (max-width : 690px) {
	.hero h1:nth-of-type(1) { font-size: 48px; letter-spacing: -.1rem; line-height: 1.15; }
	.service-tab, .service-tabs, .section__heading h2 { font-size: 36px; letter-spacing: -0.1rem; line-height: 1.25; }
	.buttons--row > span { width: calc((100% - 10px) / 2); }
}
@media only screen and (max-width : 600px) {
	.site-footer ul { padding-top: 1em; }
}	
@media only screen and (max-width : 550px) {
	.hero h1:nth-of-type(1) { font-size: 40px; letter-spacing: -.1rem; line-height: 1.25; }
	.lightgallery { grid-template-columns: repeat(2, 1fr); }
	.process-grid { grid-template-columns: repeat(1, 1fr); }
	.process-item:nth-of-type(2),
	.process-item:nth-of-type(4),
	.process-item:nth-of-type(6),
	.process-item:nth-of-type(8),
	.process-item:nth-of-type(1),
	.process-item:nth-of-type(3),
	.process-item:nth-of-type(5),
	.process-item:nth-of-type(7) { transition-delay: .15s; }

	.process-grid-3 .process-item:nth-of-type(2),
	.process-grid-3 .process-item:nth-of-type(3),
	.process-grid-3 .process-item:nth-of-type(4),
	.process-grid-3 .process-item:nth-of-type(5) { transition-delay: .15s; }
}		
@media only screen and (max-width : 450px) {
	.service-tab, .service-tabs, .section__heading h2 { font-size: 30px; letter-spacing: -0.1rem; line-height: 1.25; }
	.service-tabs { gap: 0 6px; }
	.hero h1 > span { display: inline; }
	.hero h1:nth-of-type(1) { font-size: 48px; letter-spacing: -.1rem; line-height: 1.15; }
	.hero h1:nth-of-type(1) { font-size: 40px; letter-spacing: -.1rem; line-height: 1.15; }
	.buttons--row-hero { gap: 10px; width: 100%; }
	.buttons--row-hero > span { width: calc((100% - 10px) / 2); }
	.buttons--row-hero > span > a { display: block; }
	/*
	.buttons--row-hero > span > .button  { display: block; text-align: left; }
	*/
	.button { padding: 0.85em 0 0.85em 1.15em; text-align: left; }
	.contact-links-span:nth-of-type(3) > a { padding: 0.85em 1.15em 0.85em 1.15em; }
}	
@media only screen and (max-width : 440px) {
	.hero h1:nth-of-type(1) { font-size: 36px; letter-spacing: -.1rem; line-height: 1.25; }
}
@media only screen and (max-width : 420px) {
	.buttons--row > span,
	.buttons--row-hero > span { width: 100%; }
}
@media only screen and (max-width : 399px) {
	.hero h1:nth-of-type(1) { font-size: 32px; letter-spacing: -.1rem; line-height: 1.15; }
}

.no-padding-top { padding-top: 0; }
.no-padding-bottom { padding-bottom: 0; }

.no-mrg-top { margin-top: 0; }
.no-mrg-right { margin-right: 0; }

.spacer { clear: both; }



.video-embed { aspect-ratio: 16 / 9; width: 100%; }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }


/*
.grid-row,
.right-grid,
.gallery-grid,
.lightgallery { gap: 0; }
*/



/*

body { color: lime; }

*/

/* body { color: cyan; } */

/*

.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("slika.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  z-index: -1;
}

*/

/*

Desktop	H1	H2	H3
1920+	112	64	34
1600	96	56	30
1280	80	48	28
1024	64	40	26
768	52	34	24
480	42	30	22

*/