html {

  box-sizing:border-box;
          padding:0px!important;
 margin:0px!important;
  scroll-behavior: smooth!important;

}

body { 	font : 16px Verdana!important;
        color : #000000;

        padding:0px!important;
 margin:0px!important;
 background-image: linear-gradient( 135deg, #F9F9F9 20%, #D9D9D9 99%);	
 
		box-sizing:border-box;	 
  } 
  
  
article p
{
text-indent: 15px;
 line-height: 1.4;
 margin : 5px!important;
 text-shadow: 1px 1px #fff;	

   
} 

article a {
color:#2A65DF!important;
text-decoration:underline;
	}
	
article a:hover
{	
color:#2A65DF!important;
text-decoration:none;


} 
.nav-item a

{
	
 text-shadow: 1px 1px 1px #fff!important;
color:#000 !important;
}
.nav-item .active

{
	
 text-shadow: 1px 1px 1px #fff!important;
color:#2A65DF !important;
}
  
header
{
background:#F8F9FA;
margin:0!important;
padding:0!important;
border-bottom: 0px solid #30557e;	
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
position:fixed;
top:0;
left:0;
width:100%!important;
z-index:1000!important;
}
article
{

margin:0 auto!important;
margin-top:15px!important;	

}
section
{
 background:#fff;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius:6px; 
position:relative;
padding:8px;
margin-bottom:0.5rem
}
	

.logo-brand
{
	margin:0 auto!important;
padding:0!important;

 font-family: Arial!important;	
 letter-spacing: -0.12rem!important;
 font-weight: 500;
 font-size: 1.1rem!important;
  color : #000!important;
  text-shadow: 1px 1px 1px #fff!important;
  text-decoration: none;
  line-height: 1;
  text-align:center;
  width:150px;
  background:  url("../images/tlologo1.jpg") no-repeat center -7px;
}

#haslo
{
	text-decoration: none;
	margin:0 auto!important;
padding:0!important;
text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
 font-family: Arial!important;	
 letter-spacing: 0.1rem!important;

 font-size: 0.7rem!important;
  color : #000!important;
  text-shadow: 1px 1px #fff!important;
}

h1
{
	text-decoration: none;
	margin:0 auto!important;
padding:0!important;
text-shadow: 0px 0px 13px rgba(0, 0, 0, 0.5);
 font-family: Arial!important;	
 letter-spacing: 0.1rem!important;
font-weight: 200important;
 font-size: 0.7rem!important;
  color : #000!important;
  text-shadow: 1px 1px #fff!important;
}
.foote1-1-a
{
width: 100%;
  display: inline-flex;
 justify-content: center;

margin:0;

	padding:5px;

}
.foote1-1
{
width: auto;
background:#fff;
  display: inline-flex;
 justify-content: center;
 align-content: space-around;
margin:0 auto;
margin-top:2px;
	padding:8px;
	padding-top:2px;
	padding-bottom:10px;
	flex-flow: row wrap;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	border-radius:10px;
	border: 0px solid gray;
	
}
.tlo-h2
{
 background:  url("../img/tlo-h2.jpg") no-repeat -200px 0px ;		
	
}	
	
#animacja-0

{
	width: 200px;
	height:172px;
 background:  transparent;
margin-top:5px;
text-align: center;
padding:0px;
	
 }
 
.button-a1
{
	border: 1px solid gray;
border-radius:4px!important;
padding:3px!important;
display:block;	
 font-size: 0.8rem!important;
width:40px;
 text-shadow: 1px 1px  #fff;
 color : #4D86FB!important;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
 
 position:absolute;
 right:10px;
 bottom:10px;
}
#animacja-1

{
	width: 200px;
	height:172px;
 background:  url("../images/a1.jpg") no-repeat center top;	

position:relative;
}
#animacja

{
	width: 200px;
	height:172px;
	z-index:10;
 background:  url("../images/1-5.jpg") no-repeat  top left;	


	   animation: mymove 15s steps(1) infinite;
	   -webkit-animation: mymove 15s steps(1) infinite;
		  
		
 }
 @keyframes mymove {
 0% {background-position:0 0;}
  20% {background-position:0 -172px;}
   40% {background-position:0 -344px;}
60% {background-position:0 -516px;}
        80% {background-position:0 -688px;}
		 100% {background-position:0 -860px;}

}
@-webkit-keyframes mymove {
 0% {background-position:0 0;}
  20% {background-position:0 -172px;}
   40% {background-position:0 -344px;}
60% {background-position:0 -516px;}
        80% {background-position:0 -688px;}
		 100% {background-position:0 -860px;}

}
.prze


{
	
	 font-size: 9rem!important;
 text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
	 color:#000;
	 letter-spacing: -2.0rem!important;
	height:1000px;
	position:relative;
	  background:#fff;
	  padding:44px;

}
#cos
{
background:#71DF6B;	
width: 20px;
	height: 20px;
 color:#F66831;
 padding:2px;
 text-shadow: 1px 1px 1px #fff!important;
 border-radius:50%;
 margin:10px;
}

#manifest-1

{
	width: auto;
	height: auto;
	
	 display: flex;
	align-items:center;
	padding:0px;
	padding-left:4px;
	margin:0;
	margin-top:10px;
}
#zamawiamy-strone

{
	width: 200px;
	height:150px;
	 display: flex;
	align-items:flex-end;

margin-top:2px;
text-align: center;
padding:0px;
background:  url("../images/zamawiamy-strone.jpg") no-repeat top center ;	
	
 }
 #administracja-strony-internetowej

{
	width: 200px;
	height:130px;
	 display: flex;
	align-items:flex-end;

margin-top:2px;
text-align: center;
padding:0px;
background:  url("../images/administracja-strony-internetowej.jpg") no-repeat top center ;	
	
 }
 
#przyklady-stron

{
	width: 200px;
	height:130px;
	 display: flex;
	align-items:flex-end;

margin-top:2px;
text-align: center;
padding:0px;
background:  url("../images/przyklady-stron.jpg") no-repeat center   ;	
	
 }
 
 #kontakt-wbz

{
	width: 200px;
	height:110px;
	 display: flex;
	align-items:flex-end;

margin-top:2px;
text-align: center;
padding:0px;
background:  url("../images/kontakt-wbz.jpg") no-repeat center  -5px ;	
	
 }
h2
{
font-family: Lora,serif!important;	
 line-height: 1.4rem!important;
  font-weight: bold!important;
  text-shadow: 1px 1px  #CECFD0!important;
  background-color:hsla(360, 100%, 100%, 0.6);
   color:#2160F3;
   margin:2px!important;
}

h3
{
*	 background:  url("../images/mn3.jpg") no-repeat top right;	
font-family: Lora,serif!important;
	margin:0!important;
font-size: 1.3rem!important;
 font-style: normal; 
 font-variant: normal;
 font-weight: bold!important;
 line-height: 1.3rem!important;
 text-shadow: 1px 1px  #fff!important;
*  -webkit-text-stroke: 1px black;
*    color: white;
 *   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;


}

.nav-link, .nav-item 
{

	
 text-shadow: 1px 1px #fff!important;
 text-align:center!important;
}

.navbar
{

	
  box-sizing:border-box;
          padding:0px!important;	
	 margin:0px auto!important;
}
@media (max-width: 576px) {

.nav-item 
{
	border-bottom: 1px solid #D6D6D6;
}


.nav-item:last-of-type
{
	border-bottom: 0px solid #000;
}
}

@media (min-width: 576px) {

.nav-item
{
	border-left: 1px solid #D6D6D6!important;
}

.nav-item:last-of-type
{
	border-right: 0px solid #000;
}

}

@media (min-width: 1100px) {

.navbar, article
{
	width:1100px!important;
}

}


@media (max-width: 1100px) {

.navbar, article
{
	width:100%!important;
	padding:0 5px;
}

}


@media (min-width: 735px) {

.foote1-1-a
{
	margin-bottom: 6px;
	flex-direction: row;
}
#manifest-1
{
width:500px;
}

}


@media (max-width: 735px) {

#manifest-1
{
	border-left: 8px solid #4D86FB;
	margin-top:5px;
}
 #administracja-strony-internetowej, #zamawiamy-strone,  #kontakt-wbz, #przyklady-stron
{
width:auto;
height:110px;
}
}
ul.first
{
	list-style:none;
	 padding-left: 5px;
}
ul li.first {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.54em;
}

ul li.first:before {
    position: absolute;
    left: 0px;
    top: 0px;
}

ul.first li:before {
    content: '\2705';
    color: #f00;
}

ul.second li:before {
    content: '–';
}

ul.third li:before {
    content: '→';
    color: #1969ba;
}
.wazne
{
padding:2px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background: #F9F9F9;
text-shadow: 1px 1px #fff;
width:100%;
border-radius:8px;		
	
}
#top
{
 display: none;
background: transparent;
z-index:1000;
padding:5px;
position:fixed;
bottom:4px;
right:4px;
width:40px;
height:40px;
text-decoration:none;
border:3px solid #000;
opacity: 0.5;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
	
}
#top:hover
{
	text-decoration:none;
	background: transparent;
}

@media (min-width: 1100px)
 {

#top
{
left:calc(50% + 510px);
}

}
code
{
padding:2px;
padding-right:4px;
padding-top:1px;
background:#D9D9D9;
text-shadow: 1px 1px white;
border-radius:2px;
}
#spis-tresci
{
line-height:1.4rem;
margin-bottom:1.4rem;
text-shadow: 1px 1px white;
}
#formularz, #obrazki, #tabelki, #galeria, #responsywne-szablony
{
margin:0;

padding:0;	
position:absolute;
top:-3rem;
}
#formularz-x, #obrazki-x, #tabelki-x, #galeria-x, #responsywne-szablony-x
{
	position:relative;
margin:0;

padding:0;	
margin-top:0.2rem;
}
#formularz-x h5, #obrazki-x h5, #tabelki-x h5, #galeria-x h5, #responsywne-szablony-x h5
{
margin:0;
padding:0;	
line-height:1rem!important;
color:#0080D3!important;
}

#page-top
{width: 100%!important;
min-width:330px!important;
	margin-top:2.2rem!important;
	padding-bottom:0.1rem!important;

}


#darkmode_object, #darkmode_object :active
{
	background:#000!important;
	padding:0.2rem!important;
color:#fff!important;
border:1px solid gray;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
line-height:0.6rem!important;
 font-size: 0.5rem!important;
}

#darkmode_object img
{
height:0.6rem!important;
width:0.6rem!important;
border:none;
outline:none;	
}
#guzik
{
	background:gray;
padding:20px;	
}
#guzik:focus
{
    outline: 0;
}

.guziki
{
	display:flex;
	align-items:center;
	justify-content: center;
	width:130px;

margin:20px;
	border: 1px solid gray;
border-radius:0px!important;

text-align:center;	
 font-size: 0.9rem!important;
  line-height: 0.8rem!important;
 background-image: linear-gradient( 135deg, #F9F9F9 20%, #D9D9D9 99%);
 text-shadow: 1px 1px  #fff;
 color : #2160F3;
  color : #000;


 height:36px;

 

}
.g-kazdy

{
width:100px;	
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;	
margin:0.5rem 1rem;
transition-duration: 1s;
cursor:pointer;
cursor:hand;	
}
.g-kazdy a

{
text-decoration:none;
border:none;	
}
.g-kazdy:hover

{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    z-index: 0;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;	
}
.g-kazdy-w

{
	display:flex;
	align-items:center;
	justify-content: center;
	width:300px;
	
}
.g-kazdy-all

{
margin:2rem auto;
padding:0;
	width:300px;
height:auto;	
	
}
.g-strony

{
	display:flex;
	flex-wrap: wrap;
	width:100%;
	justify-content: center;
	
}
.g-strony-x

{
position:relative;
	width:calc(50% - 10px);
	border:2px solid gray;
	margin:5px;
	margin-top:10px;
	min-width:310px;
	border-radius:4px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
min-height:186px;
height:auto;	
}

@media (max-width: 666px) {

.g-strony-x
{
	width:100%;
	
}
}
@media (max-width: 338px) {

.g-kazdy-w, .g-kazdy-all, .g-strony-x
{
	width:auto;
	
}
}

.g-tytul
{
	



margin:0;

text-align:center;
	width:100%;	
	position:absolute;
	top:0;
	left:0;
padding:0.1rem;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  text-shadow:1px 1px #000;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.6) 0px 18px 36px -18px inset;
}
.g-tytul-x
{
	


background: rgba(0, 0, 0, 0.5);

padding:0.2rem 0.3rem;
text-align:center;
	width:auto!important;	
	
color: #fff;
font-weight:200;
 font-family: Arial!important;	
  border-radius: 2px;
 font-size:0.9rem;
  text-shadow:1px 1px #000;
  
}
.g-numer
{
border:1px solid #fff;
border-radius:2px;
padding:0 0.1rem;
font-size:0.8rem;
background: #000;
}	
.g-opis-x
{
	


background: rgba(255, 255, 255, 0.95);
margin:0;
padding:0.2rem;
text-align:center;
	width:100%;	
	height:auto;

	position:absolute;
	bottom:0;
	left:0;

	
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;

 
}

.g-opis
{
 text-shadow:1px 1px #fff;
font-family: Arial!important; 
color: #000;
	line-height:0.8rem;
	 font-size:0.9rem;
}
#godziny-1
{
	
width:100%;
display:flex;
justify-content: center;
flex-wrap:  wrap;
justify-content: space-evenly;
align-items:center;

	
}
.godziny-2
{
display:flex;	
width:auto;
padding:1rem;
flex-direction: column;
max-width:400px;
justify-content: center;
align-items:center;
 background:  url("../images/lupa.png") no-repeat  center;

	
}
.godziny-2 img
{
	width:250px;
height:auto;		
opacity:0.8;		 
}
.godziny-2 p
{
	 line-height: 0.6rem !important;
    font-size: 0.8rem !important;
}

.centrum {
    display: flex;
    justify-content: center;
    padding: 4px !important;
text-shadow:1px 1px white!important;
	
}
.cn {
    color: red;
    font-weight: normal;
}

#form-kontakt
{
    display: flex;
    flex-direction: column;
	 margin: 0 auto;
	 padding:0px;
text-shadow:1px 1px white;
	  box-sizing:border-box;

}
.title {
    margin-bottom: 20px;
}
.input-groupp {
 position:relative;
	 margin: 0 auto;
	 width:100%;
	
}

.input-groupp input:focus, .input-groupp textarea:focus
{
    outline: 0;
}
.input-groupp label {
    display:inline-block;
    margin-bottom: 5px;
}

.input-groupp input, .input-groupp textarea {

	width:90%;
       border: 2px solid #f0f0f0;
	 margin:0 auto;
	border-radius: 4px;
	display: block;
	font-size: 16px;
	padding: 4px;

}

.input-groupp textarea {
	height:200px;
}

.error input, .error textarea{
    border:2px red solid;
		
}

.success input, .success textarea {
    border:2px green solid;
	
}

 .input-groupp i {
     position:absolute;
     right:4px;
     top:8px;
     visibility: hidden;
 }


 .success i.fa-check-circle{
     visibility: visible;
     color:green;
 }

 .error i.fa-exclamation-circle {
    visibility: visible;
    color:red;
}


 .input-groupp p {
     font-size: 13px;
	 text-shadow:1px 1px white;
     color:red;
     visibility: hidden;
	 display:block;
	 padding:2px;
	 margin:0 !important;
	 text-indent:0 !important;
	 text-shadow:1px 1px white;
 }

 .error p {
     visibility: visible;
 }

#form-kontakt button {
	display:block;
    padding: 3px;
  margin:0 auto 1rem auto;
    width: 6rem;
    color: #000;
   background: linear-gradient(to top, #C0C0C0, #CFCFCF, #F2F2F2);

    border-radius: 4px;
	text-shadow:1px 1px white;

		border: 1px solid gray;

 font-size: 1rem!important;



 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;

}
.form-small
{
	 line-height: 0.8rem !important;
	  margin-top:0.2rem;
    
}

@media (min-width: 800px) {

 #form-kontakt
{
	width:766px;
}

}


@media (max-width: 800px) {

 #form-kontakt
{
	width:100%;
}

}

.kontakt2 {
    width: 100%;

    text-shadow: 1px 0px 0px #fff;
   
    margin: 5px 0;
}
.kontakt3
{

margin: 0px auto;
padding: 5px;
border-radius: 5px;
display:block;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border:2px solid #a8a8a8;

}
.kontakt1
{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
height:5rem;
}

.kontakt2
{
	

border-radius: 5px;
  background:#f1f3f4;
  text-shadow: 1px 0px 0px #fff;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
  margin: 5px 0;
}

.foote11-kontakt
{
	width: 100%;
  display: inline-flex;
justify-content: flex-start;
margin:0;
overflow: hidden;
	padding:2px;
	flex-flow: nowrap;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
	font-weight:bold;
	border-radius: 4px;

	}
#kontakt-telefon, #kontakt-email, .kontakt-pokaz
{
margin-top:8px;
}
.editor

{
	         
			   COLOR: black;
	        text-shadow: 1px 1px white;
	           font-weight: bold;
		       background-color: white;
			   BORDER:  black 1px outset;
			   margin:5px;
			   padding: 2px;
			   cursor: pointer;
			    cursor: hand;
				border-radius: 2px;
				box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
				
			

}
.editor:hover

{
	         
			   COLOR: white;
	        text-shadow: 1px 1px black;
	           font-weight: bold;
		       background-color: black;
			   BORDER:  white 1px inset;
			   margin:5px;
			   padding: 2px;
			    cursor: pointer;
			    cursor: hand;
				border-radius: 2px;

}
button.accordion-button
{
line-height:1!important;
font-size:1.2rem!important;
}	
.accordion-button, .card-body p, .accordion-item
{
padding:0.2rem!important;
font-size:1.0rem!important;
line-height:1.2rem!important;	
}
.card-body {
    flex: 1 1 auto;
    padding: 0rem!important;	
}

#index h3
{
line-height:1.4rem!important;	
}