/* Ogólne */

		@font-face{
  			font-family: DefaultSans;
  			src: url('DefaultSans.ttf');
		}

		@font-face{
  			font-family: NachlieliCLM;
  			src: url('NachlieliCLM.otf');
		}

		@font-face{
  			font-family: SketchIcons;
  			src: url('SketchIcons.ttf');
		}

		body{
			margin: auto;
			font-family: DefaultSans;
			background-color: rgb(230, 230, 230);
			position: relative;
		}

		header, footer{
			width: 100%;
		}

		header{
			background-color: rgb(230, 120, 0);
			display: flex;
			height: 100px;
			font-size: 32px;
		}

		table{
			width: 100%;
			border-spacing: 0;
		}

		td.logo, td.op{
			padding: 0;
			margin: 0;
		}

		td.logo{
			width: 40%;
			background-image: url("logo.png");
			background-repeat: no-repeat;
			background-position: center;
			height: 100px;
			vertical-align: top;
			background-size: contain;
		}

		td.logo>a{
			display: block;
			width: 100%;
			height: 100%;
		}

		td.op{
			width: 20%;
			height: 100%;
			text-align: center;
		}

		td.op p{
			color: rgb(250,250,250);
			margin: 0px;
		}

		td.op p.aktualna{
			text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
		}

		td.op p a{
			text-decoration: none;
			color: rgb(250,250,250);
			transition: 0.5s;
		}


		td.op p a:hover{
			font-size: 32px;
			text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
		}

		td.op p a:active{
			color: rgb(230, 120, 0);
		}

		div.main{
			width: 60%;
			margin: 0 auto;
		}

		div.main>h3{
			text-align: center;
			margin: 0;
			margin-top: 1.5vh;
			padding: 24px;
			font-size: 24px;
		}

		div.main ul{
			margin: 0;
			padding: 0;
			align-items: center;
		}

		div.main li{
			list-style-type: none;
			background-color: rgb(255,255,255);
			display: flex;
			border-radius: 16px;
			margin-top: 10px;
			margin-bottom: 10px;
			margin-left: 3%;
			width: 95%;
			transition: all .2s ease-in-out;
		}

		div.main ul a{
			text-decoration: none;
		}

		div.main ul li img.obrazeczek{
			width: 24%;
			max-height: 150px;
			float: left;
			margin: 2%;
			object-fit: contain;
		}

		div.opis{
			width: 70%;
			padding-right: 2%;
		}

		li.klikalny>div.opis{
			margin-left: 2%;
		}

		div.main ul li h4{
			color: rgb(230, 120, 0);
			font-size: 23px;
			margin-top: 16px;
			margin-bottom: auto;
		}

		div.main p{
			color: black;
			font-size: 15px;
		}

		.klikalny:hover{
			transform: scale(1.03);
			z-index: 0;
		}

		.wrapper{
			min-height: 85vh;
		}

		.fixed{
			position: sticky;
			top: 0;
			z-index: 10;
		}

		footer{
			background-color: rgb(30, 30, 30);
			color: rgb(250,250,250);
			text-align: center;
			font-size: 20px;
			padding-top: 1vh;
			padding-bottom: 7vh;
			margin-top: 50px;
			bottom: 0;
			position: relative;
			width: 100%;
			overflow-y: hidden;
		}

		footer span{
			display: inline-block;
			margin-top: 5px;
			font-size: 15px;
		}

		footer a{
			color: rgb(250,250,250);
		}

		i{
			font-style: normal;
			font-family: NachlieliCLM;
			margin: 0;
			padding: 0;
		}

		h3, h4{
			color: rgb(30, 30, 30);
		}

/* Index */

		td.startowa{
			width: 100%;
		}

		td.startowa img{
			width: 100%;
		}

		p.tytulowa{
			display: grid;
			place-content: center;
			font-family: 'SketchIcons';
			font-size: 140px !important;
			color: rgb(230, 120, 0) !important;
			width: 24%;
			max-width: 150px;
			margin: 2%;
		}

		li.wazny{
			background-color: rgb(230,120,0) !important;
		}

		li.wazny *{
			color: rgb(250,250,250) !important;
		}
		
		li.wazny div.opis *{
			display: block;
			vertical-align: middle;
		}

/* Usługi */

		div.czekaj, div.czekaj p{
			margin-top: 50px;
		}

		div.czekaj>h4, div.czekaj>p{
			text-align: center;
		}


/* Kontakt */

		div.opis p a{
			color: black;
		}

		div.mapbox{
			padding: 2%;
			width: 100%;
		}

		div.mapbox td.lewa{
			width: 35%;
		}

		div.mapbox td.prawa{
			width: 65%;
		}

		img.mapa{
			float: right;
			margin-left: 2%;
			width: 100%;
			object-fit: contain;
			float: left;
			max-height: 450px;
			border-radius: 16px;
		}

		div.mapbox h4{
			margin-top: 0px !important;
			margin-bottom: 10px !important;
		}

		div.infobox{
			margin-top: 50px;
			font-size: 16px;
			text-align: center;
		}

		div.infobox p{
			margin: 3%;
		}

/* O mnie */

		div.o-mnie{
			padding-left: 2%;
			padding-right: 2%;
			width: 100vw;
			min-height: 10vh;
		}
		div.o-mnie p{
			font-size: 1rem;
		}

/* Podstronka :3 */

		div.podstrona{
			width: 100%;
			padding-right: 2%;
		}

		div.podstrona h4{
			margin-left: 10px;
		}

		div.podstrona p{
			margin-left: 10px;
		}

		div.podstrona img{
			float: right;
			width: 30%;
			margin: 10px;
		}

		.kliknij{
			padding-bottom: 16px;
			border-radius: 16px;
			background-color: rgb(230,120,0);
		}
		.kliknij *{
			color: rgb(250,250,250) !important;
		}


/* Wersja mobilna */

		@media only screen and (max-width: 768px){
			header{
				display: flex;
				height: 80px;
				font-size: 16px;
			}

			header table{
				height: 40px;
			}

			td.logo{
				width: 25%;
				background-image: url("logo_mini.png");
				background-repeat: no-repeat;
				background-size: contain;
				height: 80px;
			}

			td.startowa{
				width: 100%;
				background-image: url("logo.png");
			}

			td.op{
				margin-left: 10px;
			}

			td.op p a:hover{
				font-size: 18px;
				text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
			}		

			div.main{
				width: 100%;
			}

			div.main p{
				color: black;
				font-size: 10px;
			}
			
			div.main ul li h4{
				color: rgb(230, 120, 0);
				font-size: 15px;
				margin-top: 16px;
				margin-bottom: auto;
			}

			div.main h3{
				text-align: center;
				margin: 0;
				margin-top: 2vh;
				padding: 8px;
				font-size: 17px;
			}

			div.opis p{
				font-size: 13px;
			}

			p.tytulowa{
			font-size: 120px !important;
			}

			div.czekaj{
				margin-top: 2px;
				margin-top: 20px !important;
				padding-left: 2%;
				padding-right: 2%;
			}

			div.czekaj h4{
				font-size: 15px;
			}

			div.czekaj p{
				font-size: 13px;
				margin-top: 25px !important;
			}

			div.infobox{
				font-size: 12px;
			}

			div.mapbox>h4{
				padding-top: 4px;
			}

			footer{
				font-size: 12px;
				margin-top: 30px;
			}

			footer span{
				font-size: 10px;
			}
		}
/* ^ tylko do portu mobilnego - ustawienia widoku domyślnego są powyżej */