/* fluid font size */

:root { -fs100vw-px: 290; }
@media only screen and (min-width: 300px) { :root { --fs100vw-px: 300; } }
@media only screen and (min-width: 320px) { :root { --fs100vw-px: 320; } }
@media only screen and (min-width: 340px) { :root { --fs100vw-px: 340; } }
@media only screen and (min-width: 360px) { :root { --fs100vw-px: 360; } }
@media only screen and (min-width: 380px) { :root { --fs100vw-px: 380; } }
@media only screen and (min-width: 400px) { :root { --fs100vw-px: 400; } }
@media only screen and (min-width: 420px) { :root { --fs100vw-px: 420; } }
@media only screen and (min-width: 440px) { :root { --fs100vw-px: 440; } }
@media only screen and (min-width: 460px) { :root { --fs100vw-px: 460; } }
@media only screen and (min-width: 480px) { :root { --fs100vw-px: 480; } }
@media only screen and (min-width: 500px) { :root { --fs100vw-px: 500; } }
@media only screen and (min-width: 520px) { :root { --fs100vw-px: 520; } }
@media only screen and (min-width: 540px) { :root { --fs100vw-px: 540; } }
@media only screen and (min-width: 560px) { :root { --fs100vw-px: 560; } }
@media only screen and (min-width: 580px) { :root { --fs100vw-px: 580; } }
@media only screen and (min-width: 600px) { :root { --fs100vw-px: 600; } }
@media only screen and (min-width: 620px) { :root { --fs100vw-px: 620; } }
@media only screen and (min-width: 640px) { :root { --fs100vw-px: 640; } }
@media only screen and (min-width: 660px) { :root { --fs100vw-px: 660; } }
@media only screen and (min-width: 680px) { :root { --fs100vw-px: 680; } }
@media only screen and (min-width: 700px) { :root { --fs100vw-px: 700; } }
@media only screen and (min-width: 720px) { :root { --fs100vw-px: 720; } }
@media only screen and (min-width: 740px) { :root { --fs100vw-px: 740; } }
@media only screen and (min-width: 760px) { :root { --fs100vw-px: 760; } }
@media only screen and (min-width: 768px) { :root { --fs100vw-px: 768; } }
@media only screen and (min-width: 780px) { :root { --fs100vw-px: 780; } }
@media only screen and (min-width: 800px) { :root { --fs100vw-px: 800; } }
@media only screen and (min-width: 820px) { :root { --fs100vw-px: 820; } }
@media only screen and (min-width: 840px) { :root { --fs100vw-px: 840; } }
@media only screen and (min-width: 860px) { :root { --fs100vw-px: 860; } }
@media only screen and (min-width: 880px) { :root { --fs100vw-px: 880; } }
@media only screen and (min-width: 900px) { :root { --fs100vw-px: 900; } }
@media only screen and (min-width: 920px) { :root { --fs100vw-px: 920; } }
@media only screen and (min-width: 940px) { :root { --fs100vw-px: 940; } }
@media only screen and (min-width: 960px) { :root { --fs100vw-px: 960; } }
@media only screen and (min-width: 980px) { :root { --fs100vw-px: 980; } }
@media only screen and (min-width: 1000px) { :root { --fs100vw-px: 1000; } }
@media only screen and (min-width: 1020px) { :root { --fs100vw-px: 1020; } }
@media only screen and (min-width: 1024px) { :root { --fs100vw-px: 1024; } }
@media only screen and (min-width: 1040px) { :root { --fs100vw-px: 1040; } }
@media only screen and (min-width: 1060px) { :root { --fs100vw-px: 1060; } }
@media only screen and (min-width: 1080px) { :root { --fs100vw-px: 1080; } }
@media only screen and (min-width: 1100px) { :root { --fs100vw-px: 1100; } }
@media only screen and (min-width: 1120px) { :root { --fs100vw-px: 1120; } }
@media only screen and (min-width: 1140px) { :root { --fs100vw-px: 1140; } }
@media only screen and (min-width: 1160px) { :root { --fs100vw-px: 1160; } }
@media only screen and (min-width: 1180px) { :root { --fs100vw-px: 1180; } }
@media only screen and (min-width: 1200px) { :root { --fs100vw-px: 1200; } }
@media only screen and (min-width: 1220px) { :root { --fs100vw-px: 1220; } }
@media only screen and (min-width: 1240px) { :root { --fs100vw-px: 1240; } }
@media only screen and (min-width: 1260px) { :root { --fs100vw-px: 1260; } }
@media only screen and (min-width: 1280px) { :root { --fs100vw-px: 1280; } }
@media only screen and (min-width: 1300px) { :root { --fs100vw-px: 1300; } }
@media only screen and (min-width: 1320px) { :root { --fs100vw-px: 1320; } }
@media only screen and (min-width: 1340px) { :root { --fs100vw-px: 1340; } }
@media only screen and (min-width: 1360px) { :root { --fs100vw-px: 1360; } }
@media only screen and (min-width: 1380px) { :root { --fs100vw-px: 1380; } }
@media only screen and (min-width: 1400px) { :root { --fs100vw-px: 1400; } }
@media only screen and (min-width: 1420px) { :root { --fs100vw-px: 1420; } }
@media only screen and (min-width: 1440px) { :root { --fs100vw-px: 1440; } }
@media only screen and (min-width: 1460px) { :root { --fs100vw-px: 1460; } }
@media only screen and (min-width: 1480px) { :root { --fs100vw-px: 1480; } }
@media only screen and (min-width: 1500px) { :root { --fs100vw-px: 1500; } }




:root {
	--fluid-size-global-initial-width-px:1380;
	--fluid-size-initial-width-px:var(--fluid-size-global-initial-width-px);
	--fluid-size-global-multiplier: min( (var(--fs100vw-px) / var(--fluid-size-global-initial-width-px)), 1);
	--fluid-size-multiplier: var(--fluid-size-global-multiplier);
}

@media only screen and (max-width:1024px){
	:root {
		--fluid-size-tablet-initial-width-px: 1024;
		--fluid-size-initial-width-px:var(--fluid-size-tablet-initial-width-px);
		--fluid-size-tablet-multiplier: min( (var(--fs100vw-px) / var(--fluid-size-tablet-initial-width-px)), 1);
		--fluid-size-multiplier: var(--fluid-size-tablet-multiplier);
	}
}

@media only screen and (max-width:768px){
	:root {
		--fluid-size-mobile-initial-width-px: 768;
		--fluid-size-initial-width-px:var(--fluid-size-mobile-initial-width-px);
		--fluid-size-mobile-multiplier: min( (var(--fs100vw-px) / var(--fluid-size-mobile-initial-width-px)), 1);
		--fluid-size-multiplier: var(--fluid-size-mobile-multiplier);
	}
}

:root {
	
	/* rozmiary odstepow */
	--spacing-xs: 8px;
    --spacing-s:  16px;
    --spacing-m:  32px;
    --spacing-l:  64px;
    --spacing-xl: 120px;
    --spacing-xxl: 200px;
	
	
	--scrollbar-size:20px;
	
	/* fonts */
	--global-font-weight:400;
	--global-font-family:"Open Sans", sans-serif;
	--global-line-height:1.5em;
	--global-letter-spacing:0;
	--heading1-font-family:  "Playfair Display", serif;
	--heading1-font-weight:500;
	--heading1-line-height:1em;
	--heading1-letter-spacing:-0.05em;
	--heading2-font-family: "Sofia Sans Extra Condensed", sans-serif;
	--heading2-font-weight:400;
	--heading2-line-height:1em;
	--heading2-letter-spacing:0.13em;
	
	/* font sizes */
	--very-big-font-size:1.5rem; /* 24px */
	--bigger-font-size:1.25rem; /* 20px */
	--big-font-size:1.125rem; /* 18px */
	--medium-font-size:1rem; /* 16px */
	--default-font-size:0.9375rem; /* 15px */
	--small-font-size:0.875rem; /* 14px */
	--smaller-font-size:0.8125rem; /* 13px */
	--very-small-font-size:0.75rem; /* 12px */
	
	/* paddings */
	--padding-extra-small-px:max(4, 6 * var(--fluid-size-global-multiplier));
	--padding-small-px:max(7, 10 * var(--fluid-size-global-multiplier));
	--padding-normal-px:max(10, 15 * var(--fluid-size-global-multiplier));
	--padding-medium-px:max(15, 20 * var(--fluid-size-global-multiplier));
	--padding-large-px:max(30, 40 * var(--fluid-size-global-multiplier));
	--padding-extra-large-px:max(40, 60 * var(--fluid-size-global-multiplier));
	--padding-extra-extra-large-px:max(55, 80 * var(--fluid-size-global-multiplier));
	--padding-extra-small:calc(1px * var(--padding-extra-small-px]));
	--padding-small:calc(1px * var(--padding-small-px));
	--padding-normal:calc(1px * var(--padding-normal-px));
	--padding-medium:calc(1px * var(--padding-medium-px));
	--padding-large:calc(1px * var(--padding-large-px));
	--padding-extra-large:calc(1px * var(--padding-extra-large-px));
	--padding-extra-extra-large:calc(1px * var(--padding-extra-extra-large-px));
	
	/* colors */
	--color-text: #000000;
	--color-text-light: #686868;
	--color-text-lighter: #aeaeae;
	--color-text-very-light: #d2d2d2;
	--color-text-very-very-light: #eaeaea;
	--color-primary: #000000;
	--color-primary-alternative: #3f3f3f;
	--color-secondary: #bababa;
	--color-secondary-alternative: #d3d3d3;


	
	/* updated by js */
	--header-position-px:0;
	--current-scroll-px:0;
	--is-scrolled:0;
	--is-not-scrolled:1;
	--js:0;
	
	
	
	
	
	
	/* szerokosc zawartosci strony nie moze byc wieksza */
	--global-site-max-width-px:1300;
	
	/* domyslne odstepy poziome od krawedzi okna */
	--global-site-horizontal-margin-px:30;
	
	/* domyslne odstepy poziome wewnatrz elementow */
	
	--color-dark-button: #051920;
	--color-dark-button-hover: #214552;
	
	--color-light-button: #afb5b7;
	--color-light-button-hover: #214552;
	
	/* body */
	--body-background: #ffffff;
  
	/* element nad naglowkiem */
	--above-header-height-px:0;
	
	/* header */
	--side-area-width-px:60; /* obszar boczny przeznaczony na elementy social */
	--header-background:#ffffff;
	
	/* header top */
	--header-top-height-px:0;
	--header-top-content-height-px:0;
	--header-top-scrolled-height-px:0;
	--header-top-scrolled-content-height-px:0;
	
	/* header middle */
	--header-middle-height-px:120;
	--header-middle-content-height-px:90;
	--header-middle-scrolled-height-px:90;
	--header-middle-scrolled-content-height-px:60;
	--header-middle-menu-gap-px:25;
	--header-middle-menu-size:16px;
	--header-middle-menu-color: var(--color-text);
	--header-middle-menu-color-hover: var(--color-text-lighter);
	--header-middle-submenu-color: var(--color-text-lighter);
	--header-middle-submenu-color-hover: var(--color-text);
	--header-middle-submenu-size:15px;
	
	/* header bottom */
	--header-bottom-height-px:50;
	--header-bottom-content-height-px:30;
	--header-bottom-scrolled-height-px:30;
	--header-bottom-scrolled-content-height-px:20;
	
	--header-bottom-height-px:0;
	--header-bottom-content-height-px:0;
	--header-bottom-scrolled-height-px:0;
	--header-bottom-scrolled-content-height-px:0;
	
	/* zsumowane wysokosci headera */
	--header-height-px: calc(var(--header-top-height-px) + var(--header-middle-height-px) + var(--header-bottom-height-px));
	--header-scrolled-height-px: calc(var(--header-top-scrolled-height-px) + var(--header-middle-scrolled-height-px) + var(--header-bottom-scrolled-height-px));
  
  
  
	/* footer */
	--footer-background: #ffffff;
	
	--max-site-background-width: min(var(--global-background-max-width), 100vw - (2 * var(--side-area-width)) - var(--scrollbar-size));
	--max-site-content-width: min(var(--global-site-max-width), 100vw  - (2 * var(--side-area-width)) - var(--scrollbar-size) - (2 * var(--global-site-horizontal-margin)));
  
}

@media only screen and (max-width:1024px){
	:root {
		--max-site-background-width: 100%;
	}
}

html.js {
	--js:1;
}


/* mobile menu - jeszcze przed przejsciem na tablet*/
@media only screen and (max-width:1366px){
	:root {
		--global-site-horizontal-margin-px:25;
		--side-area-width-px:25;
		--header-middle-height-px:70;
		--header-middle-content-height-px:50;
		--header-middle-scrolled-height-px:60;
		--header-middle-scrolled-content-height-px:40;
	}
}


/* tablet */

@media only screen and (max-width:1024px){
	
	:root {
		--side-area-width-px:0;
	}
	
	
	html {
		
	
	}
}




/* mobile */

@media only screen and (max-width:768px){
	
	:root {
		/* rozmiary odstepow */
		--spacing-m:   24px;
		--spacing-l:   40px; 
		--spacing-xl:  60px;
		--spacing-xxl: 80px;
	}
	
	
	html {
		--scrollbar-size:0px;
	}
}



body {
	
	/* is scrolled */
	--is-scrolled: max(0, min(1, var(--current-scroll-px) - (var(--header-height-px) - var(--header-scrolled-height-px) + var(--above-header-height-px))));
	--is-not-scrolled: calc(1 - var(--is-scrolled));
	
	/* header current sizes */
	--header-top-current-height-px:calc( (var(--header-top-height-px) * var(--is-not-scrolled)) + (var(--header-top-scrolled-height-px) * var(--is-scrolled)) );
	--header-top-current-content-height-px:calc( (var(--header-top-content-height-px) * var(--is-not-scrolled)) + (var(--header-top-scrolled-content-height-px) * var(-- is-scrolled)) );
	
	--header-middle-current-height-px:calc( (var(--header-middle-height-px) * var(--is-not-scrolled)) + (var(--header-middle-scrolled-height-px) * var(--is-scrolled)) );
	--header-middle-current-content-height-px:calc( (var(--header-middle-content-height-px) * var(--is-not-scrolled)) + (var(--header-middle-scrolled-content-height-px) * var(--is-scrolled)));
	
	--header-bottom-current-height-px:calc( (var(--header-bottom-height-px) * var(--is-not-scrolled)) + (var(--header-bottom-scrolled-height-px) * var(--is-scrolled)) );
	--header-bottom-current-content-height-px:calc( (var(--header-bottom-content-height-px) * var(--is-not-scrolled)) + (var(--header-bottom-scrolled-content-height-px) * var(--is-scrolled)) );
	
}

:root {
	/* zmienne z wartosciami px calc(1px * var()); */
	--global-site-max-width:calc(1px * var(--global-site-max-width-px));
	--side-area-width:calc(1px * var(--side-area-width-px));
	--global-site-horizontal-margin:calc(1px * var(--global-site-horizontal-margin-px));
	
	/* aktualne obliczone marginesy boczne globalne */
	--global-site-horizontal-left-margin:var(--global-site-horizontal-margin);
	--global-site-horizontal-right-margin:calc(var(--global-site-horizontal-margin) + var(--side-area-width)); 
}



:root {
	--global-background-max-width:calc(1920px - (2 * var(--side-area-width))); 
}


/* button */
:root {
	--input-font-size:var(--small-font-size);
	--input-border-color:var(--color-text-very-light);
	--input-border-focus-color:var(--color-text);
	--input-shadow-focus-color:rgba(0,0,0,0.4);
	--input-background-color:#ffffff;
	--input-text-color:var(--color-text);
	--input-arrow-color:var(--color-text-very-light);
	--input-arrow-focus-color:var(--color-text);
	
	--button-font-size:var(--small-font-size);
	--button-background:var(--color-primary);
	--button-background-hover:var(--color-primary-alternative);
	--button-color:#ffffff;
	--button-color-hover:#ffffff;
	
	--button-secondary-background:var(--color-secondary);
	--button-secondary-background-hover:var(--color-secondary-alternative);
	--button-secondary-color:#ffffff;
	--button-secondary-color-hover:#ffffff;
	
}


/* heading */
:root {
	--heading-background-color:#f2f2f2;
	--heading-alternative-background-color:#ffffff;
	--heading-dark-background-color:#000000;
	--heading-dark-alternative-background-color:#383838;
	--heading-vertical-padding:var(--padding-large);
}

/* breadcrumbs */
:root {
	--breadcrumbs-vertical-padding:var(--padding-medium);
	--breadcrumbs-font-size:var(--smaller-font-size);
	--breadcrumbs-height:var(--breadcrumbs-font-size);
	--breadcrumbs-top-color:var(--color-text-light);
	--breadcrumbs-color:var(--color-text-light);
	--breadcrumbs-color-hover:var(--color-text);
}

/* offers list */
:root {
	--offers-list-size1:max(1rem, 1.2rem * var(--fluid-size-global-multiplier));
	--offers-list-size2:max(1.1rem, 1.3rem * var(--fluid-size-global-multiplier));
	--offers-list-size3:max(1.1rem, 1.3rem * var(--fluid-size-global-multiplier));
	--offers-list-size4:max(1rem, 1rem * var(--fluid-size-global-multiplier));
}

/* offer */
:root {
	--offer-heading-bottom-size:100px;
	--offer-agents-heading-size:max(1.5rem, 1.7rem * var(--fluid-size-global-multiplier));
	--offer-agents-function-size:max(1rem, 1.2rem * var(--fluid-size-global-multiplier));
	--offer-agents-name-size:max(1.4rem, 1.6rem * var(--fluid-size-global-multiplier));
}

/* text styles */
:root {
	--text-styles-heading1-size:max(2.625rem, 3rem * var(--fluid-size-global-multiplier));
	--text-styles-heading2-size:max(2.25rem, 2.625rem * var(--fluid-size-global-multiplier));
	--text-styles-heading3-size:max(1.875rem, 2.25rem * var(--fluid-size-global-multiplier));
	--text-styles-heading4-size:max(1.6251rem, 1.875rem * var(--fluid-size-global-multiplier));
	--text-styles-heading5-size:max(1.25rem, 1.5rem * var(--fluid-size-global-multiplier));
	--text-styles-heading6-size:max(1rem, 1.25rem * var(--fluid-size-global-multiplier));
}




/* homepage slider */
:root {
	
	
	
	--homepage-slider-inner-padding: var(--padding-large);
	--homepage-slider-slogan-vertical-padding:var(--padding-extra-large);
	--homepage-slider-slogan-color:var(--color-text);
	--homepage-slider-slogan-size1:max(2.5rem, 5rem * var(--fluid-size-global-multiplier));
	--homepage-slider-slogan-size2:max(1.5rem, 1.75rem * var(--fluid-size-global-multiplier));
	--homepage-slider-slogan-size3:var(--small-font-size);
	--homepage-slider-slider-size1:max(1.25rem, 1.75rem * var(--fluid-size-global-multiplier));
	--homepage-slider-slider-size2:max(1.75rem, 2.625rem * var(--fluid-size-global-multiplier));
	
	--homepage-slider-slider-mobile-color:var(--color-text);
	
	--homepage-slider-searchform-heading-size1:max(1.7rem, 2rem * var(--fluid-size-global-multiplier));
	--homepage-slider-searchform-heading-size2:max(1.1rem, 1.3rem * var(--fluid-size-global-multiplier));
	
}

/* homepage search form */
:root {
	
}