/*
	col-xs < 768
	col-sm-x >= 768 < 992
	col-md-x >= 992 < 1200
	col-lg-x >= 1200
	
	col-xs < 768
	col-sm-x >= 768 < 992
	col-md-x >= 992 < 1200
	col-lg-x >= 1200 < 1366	
	col-xl-x >= 1366 < 1568
	col-xxl-x > 1568
*/

:root {
	--color-dominum-1:#FF6200;
	--color-dominum-1-light:color-mix(in srgb, var(--color-dominum-1) 90%, white);
	--color-dominum-1-dark:color-mix(in srgb, var(--color-dominum-1) 90%, black);
	--color-dominum-2:#78A614;
	--color-dominum-2-light:color-mix(in srgb, var(--color-dominum-2) 90%, white);
	--color-dominum-2-dark:color-mix(in srgb, var(--color-dominum-2) 90%, black);
	--color-dominum-3:#3B82BB;
	--color-dominum-3-light:color-mix(in srgb, var(--color-dominum-3) 90%, white);
	--color-dominum-3-dark:color-mix(in srgb, var(--color-dominum-3) 90%, black);
	
	--color-text: #333;
	--color-text-footer: #FFFFFF;
	--color-link: #3b82bb;
	--color-link-hover: var(--color-dominum-1);
	--color-link-footer: var(--color-dominum-1);
	--color-link-footer-hover: var(--color-dominum-1);
	--color-border: #DDD;
	--color-border-footer: rgba(255,255,255,.08);
	
	--color-white: #FFF;
	--color-blue: #3b82bb;
	--color-blue-dark: color-mix(in srgb, var(--color-blue) 90%, black);
	--color-green: #73bf2d;
	--color-green-dark: color-mix(in srgb, var(--color-green) 90%, black);
	--color-orange: #ff6200;
	--color-orange-dark: color-mix(in srgb, var(--color-orange) 90%, black);
	--color-red: #c30001;
	--color-red-dark: color-mix(in srgb, var(--color-red) 90%, black);
	--color-gray: #AAA;
	--color-gray-dark: color-mix(in srgb, var(--color-gray) 90%, black);
	
	--wb-header-brand-height: 145px;
	
	--wb-container-width-xs: 100%;
	--wb-container-width-sm: 750px;
	--wb-container-width-md: 970px;
	--wb-container-width-lg: 1170px;
	--wb-container-width-xl: 1560px;	
}

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

html, 
body {
	width:100%;
	margin:0;
	padding:0;
	font-size: 14px;
}

body {
	background-color: #F5F4F3;
	color: var(--color-text);
	font-family: Roboto, sans-serif;
	font-weight: 400;
	line-height: 1.75;
	text-align: left;
	text-wrap-style:pretty;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a,
a:visited,
a:active {
	color:var(--color-link);
	text-decoration: none;
}

a:hover{
  color: var(--color-link-hover);
  text-decoration: none;
}

a:focus,
a:active,
button:focus,
button:active {
    outline: none;
    box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
	color:#000;
}

h1,.h1 {
	font-size:2.2rem;
	margin-top:20px;
	margin-bottom:20px;
	line-height:1.5;
}

h2, .h2, h3, .h3 {
	font-size:1.8rem;
	margin-top:20px;
	margin-bottom:20px;
	line-height:1.5;
}

h4, .h4, h5, .h5 {
	font-size:1.4rem;
	margin-top:10px;
	margin-bottom:10px;
	line-height:1.5;
}

h6, .h6 {
	font-size:1rem;
	margin-top:10px;
	margin-bottom:10px;
	line-height:1.5;
}

p {
	margin:0;
	line-height:2;
}

ul, ol {
	padding-left:20px;
	margin:0;
}

li {
	padding: 5px 0;
}

hr {
	border-color:var(--color-border);
}

img {
    max-width: 100%;
	max-height:100%;
    margin-left: auto;
    margin-right: auto;
}

/* Jeśli ekrany większe niż laptop*/
@media (min-width: 1367px) {
  body {
    font-size:16px;
  }
}