html {
	margin-top: 0 !important;
}

body
{
	background-color: #f2f2f2;
	color: #333333; 
    font-family: Arial, Helvetica, sans-serif;
	font-display: swap;
	margin-top: 87px;
}

blockquote {
	font-style: italic;
}

button:focus {
    outline: none !important;
    border: none !important;
}

b, strong {
    font-weight: 600;
}

.margin-a {
	margin: auto;
}

.wrap-x {
    max-width: 2000px;
    width: auto;
    margin: auto;
}

h1 {
	color: #f39314;
    text-shadow: 1px 1px 0px black;
    font-weight: 900;
    font-size: 2em;
	padding-bottom: 15px;
	text-transform: uppercase;
}

h2 {
	color: #f39314;
    text-shadow: 1px 1px 0px black;
    font-weight: 900;
    font-size: 2em;
	padding-bottom: 15px;
	text-transform: uppercase;
}

h3 {
	font-weight: 600;
	text-shadow: 1px 1px 0px black;
	color: white;
}

h4 {
	font-weight: 600;
	display: block;
}

h5 {
	text-align: center;
    padding-top: 20px;
    border-bottom: 1px dotted #333333;
	font-size: 1.5rem;
}

p.pod-tytul {
	font-size: 1.6rem;
    font-weight: 100;
    font-family: Arial Narrow;
    line-height: 2.2rem;
    text-transform: uppercase;
	color: #333333;
}

p.p-header {
    font-size: 1.6rem;
    font-weight: 100;
    font-family: Arial Narrow;
    line-height: 2.2rem;
	text-transform: uppercase;
	color: white;
}

span.span-cena {	
	text-align: center;
    padding: 1rem 0;
    margin-top: 17px;
    margin: 0px;
    display: block;
	font-size: 1.5rem;
}

span.span-cena-pakiet {	
	text-align: center;
    padding: 1rem 0;
    border-top: 1px dotted #333333;
    margin-top: 17px;
    margin: 0px;
    display: block;
	font-size: 1.5rem;
}

a {
	color: white;
	transition: 0.3s;
}

a:hover {
	color: #f39314;
	text-decoration: none;
}

ul.ul-erwd li { 
    list-style: none;
    position: relative;
    padding: 0px;
	left: -7px;
}

ul.ul-erwd li:before {
  background: transparent url("img/tringle-rwd.svg") scroll 0 0 no-repeat;
  content:"";
  width: 16px;
  height: 16px;
  position: absolute;
	left: -15px;
  top: 8px;
}

.kolor-platinum {
	color: #7ba8b5;
}

.kolor-gold {
	color: gold;
}

.kolor-silver {
	color: silver;
}

#cboxLoadedContent {
	background-image: url("img/pop.png");
}

div#cboxLoadedContent::-webkit-scrollbar {
    width: 0px;
}

@media (max-width: 991px) {
	#colorbox, #cboxOverlay {
		display: none !important;
	}
}

strong.kolor-silver, strong.kolor-gold, strong.kolor-platinum {
	text-shadow: 1px 1px 0px #333333;
}

i.i-54-shadow { /* IKONKI np. w Grafika */
    font-size: 54px;
    margin: auto;
    display: block;
    text-align: center;
    color: #f39314;
    text-shadow: 1px 1px 0px #333333;
	padding-top: 10px;
}

.bg-erwd-orange {
	background-color: #f39314;
	background-image: linear-gradient(-195deg, #ff6a00, #ffc31b,#ffb000);
	transition: 0.5s;
}

.btn {
	border-radius: 0;
}

.btn-black-white {
    color: white;
    background-color: #333333;
    border-color: #1d2124;
}

.btn-black-white:hover {
    color: black;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #1d2124;
}

/* ---------- SCROLL-TOP */
#myBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-image: url(img/scroll-top.svg);
    cursor: pointer;
    padding: 33px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
	transition: 0.5s;
}

#myBtn:hover {
    background-image: url(img/scroll-top-orange.svg);
}
/* -------------------- */

.dropdown-item {
    padding: .65rem 1.5rem;
}

#search-lupka {
	opacity: 0.6;
	width: 20px;
}

button:hover #search-lupka {
	opacity: 1;
}

.header-contact {
	background-color: #f39314;
    color: white;
    border-bottom: 1px solid #000000;
}

.header-contact a {
	color: black;
}

#header-menu {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	z-index: 100;
}

#header-menu {
	background-color: white;
	transition: all 0.5s ease 0s;
}

#logo-top-1 {
	transition: all 0.3s ease 0.3s;
}

.vat23 {
	font-size: 1rem;
	display: block;
	margin: 10px;
}


/* ------------------  HEADER-MENU */
.navbar
{
	min-height: 57px;
}

/* --------------------------------- */




/* ------------------ UNDER-HEADER */
#under-header {
	border-top: 2px solid #f39314;
}

#under-header .wrap-x {
	background-image: url(img/strona-glowna-header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#under-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.65);
	padding: 120px 0px;
}

/* --------------------------------- */




/* -------------------------- OFERTA */

#oferta .wrap-x {
	background-image: url('img/oferta.jpg');
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#oferta .wrap-x-shadow {
    background-image: url(img/odcinki.svg), linear-gradient(rgba(242, 242, 242, .99), rgba(242, 242, 242, 0.6));
    padding: 120px 0px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: contain;
}

#oferta div#gutters {
	background-color: white;
    border: 2px solid #F39314;
	max-width: 280px;
	padding: 60px 30px !important;
	margin: auto;
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1199px) {
	#oferta div#gutters {
		padding: 60px 20px !important;
	}
}

@media (max-width: 991px) {
	#oferta div#gutters {
		padding: 60px 0px !important;
	}
	#oferta div#gutters button {
		font-size: 0.94rem;
	}
}

@media (max-width: 767px) {
	#oferta div#gutters {
		padding: 60px 30px !important;
	}
	#oferta div#gutters button {
		font-size: 1rem;
	}
}

#oferta div.gutters {
	background-color: white;
    border: 2px solid #F39314;
	max-width: 280px;
	padding: 60px 30px !important;
	margin: auto;
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1199px) {
	#oferta div.gutters {
		padding: 60px 20px !important;
	}
}

@media (max-width: 991px) {
	#oferta div.gutters {
		padding: 60px 0px !important;
	}
	#oferta div.gutters button {
		font-size: 0.94rem;
	}
}

@media (max-width: 767px) {
	#oferta div.gutters {
		padding: 60px 30px !important;
	}
	#oferta div.gutters button {
		font-size: 1rem;
	}
}


#oferta button {
	display: block;
}

#oferta button::before {
	content: url('img/trojkat-w-dol.svg');
	position: relative;
    top: -25px;
    height: 0;
    display: block;
}

#oferta div.pasek-margin-wrap {
    background-color: #F39314;
}

/* ------------------------------------- */


/* ------------------------ DLACZEGO MY? */
#dlaczego-my a {
	color: #333333;
}

#dlaczego-my a:hover {
	color: #f39314;
}

#dlaczego-my .wrap-x-shadow {
	padding: 120px 0px;
}

#dlaczego-my img {	
	margin: auto;
    max-height: 550px;
}
	
/* ------------------------------------- */


.wpis
{
	text-align: justify;
	font-size: 16px;
	padding: 30px;
	margin-bottom: 40px;
}

.list-group-item-dark
{
	background-color: #373a3d;
	color: white;
}

.list-group-item-dark:hover
{
	background-color: #91a33b !important;
}

.list-group .active
{
	background-color: #91a33b !important;
	cursor: default;
}

.blockquote
{
	line-height: 120%;
}

.card {
	background-color: transparent;
	padding: 0;
	margin:0;
	border: none;
}
	
	
#container_anime-top-1 {
    position: absolute;
    width: -webkit-fill-available;
}

/* Bombelek 1 (sloneczko) */
img.anime {
	float: left;
	z-index: -3;
	height: 90px;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
	opacity: 0.7;

	transform-origin: center;
	position: inherit;
	animation-name: bombelek1;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@keyframes bombelek1 {
	0%    {left:0%; top:10%; transform: scale(1);}
	25%   {left:75%; top:40%; transform: scale(0.7);}
	75%   {left:33%; top:75%; transform: scale(0.4);}
	100%  {left:0%; top:10%; transform: scale(1);}
}

/* Bombelek 2 (biały) */
img.anime2 {
	float: left;
	z-index: -3;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
	opacity: 0.6;

	transform-origin: center;
	position: inherit;
	animation-name: bombelek2;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@keyframes bombelek2 {
	0%    {left:5%; top:18%; transform: scale(0.2);}
	20%   {left:63%; top:48%; transform: scale(0.8);}
	40%   {left:23%; top:75%; transform: scale(0.5);}
	100%  {left:5%; top:18%; transform: scale(1);}
}

/* -- -------------------------------------------  Bombelek 3 (asymetric)  */

img.anime3 {
	float: left;
	z-index: -3;
	position: relative;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
	opacity: 0.7;

	transform-origin: center;

	animation-name: bombelek3;
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@keyframes bombelek3 {
	0%    {left:15%; top:11%; transform: scale(0.7);}
	30%   {left:74%; top:68%; transform: scale(0.4);}
	65%   {left:23%; top:25%; transform: scale(0.2);}
	100%  {left:15%; top:11%; transform: scale(0.7);}
}


/* -------------------------------------- STRONA WWW */

#page-strona-www-header .wrap-x {
	background-color: white;
	background-image: url(img/urzadzenia-multi.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-strona-www-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.75);
    padding: 100px 0px;
    color: white;
}

#page-strona-www-header .card h4 {
	color: #f39314;
    text-shadow: 1px 1px 0px black;
	font-weight: 600;
}

#page-strona-www-header img {
	width: 300px;
}

#page-strona-www-header span.span-www-header {
	width: 64px;
	height: 64px;
	font-size: 32px;
	border: 2px solid #f39314;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
	font-weight: 600;
    text-shadow: 1px 1px 0px black;
}


/* -------------------------------------- Strona WWW - OFERTA WWW */

#oferta-www .wrap-x {
	background-color: white;
	background-image: url(img/strona-www-oferta.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#oferta-www .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.0);
    padding: 100px 0px;
    color: #333333;
}

#oferta-www .container {
	background-color: rgba(255, 255, 255, 0.85);
}


/* -------------------------------------- Strona WWW - DODATKI WWW */


#dodatki-www .wrap-x {
	background-color: white;
	background-image: url(img/jak-dzialamy.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dodatki-www .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.85);
    padding: 100px 0px;
    color: #333333;
}

/* ---------------------------------------------- Strona WWW - JAK DZIALAMY WWW */

#jak-dzialamy-www .pasek-margin-wrap {
	background-color: #F39314;
}


#jak-dzialamy-www .wrap-x {
	background-color: white;
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#jak-dzialamy-www .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.85);
    padding: 100px 0px;
    color: #333333;
}

#jak-dzialamy-www .step {
  width: 72px;
  height: 72px;
  font-size: 36px;
  border-radius: 50%;
  border: 2px solid #242424;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 9px rgba(51, 51, 51, 0.5);
  font-weight: 600;
  color: #333333;
  text-shadow: none;
}

@media (min-width: 768px) {
  #jak-dzialamy-www .separline .step-wrapper {
    position: relative;
  }
  
  #jak-dzialamy-www .separline .step-wrapper:before,
  #jak-dzialamy-www .separline .step-wrapper:after {
    top: 38px;
    position: absolute;
    content: "";
    height: 2px;
    width: calc(50% + 15px - 36px - 8px);
    background-color: #f39314;
  }
  #jak-dzialamy-www .separline .step-wrapper:before {
    left: -15px;
  }
  #jak-dzialamy-www .separline .step-wrapper:after {
    left: calc(50% + 8px + 36px);
  }
  
  #jak-dzialamy-www .separline.last-child .step-wrapper:after,
  #jak-dzialamy-www .separline:nth-child(3n) .step-wrapper:after,
  #jak-dzialamy-www .separline:nth-child(3n+1) .step-wrapper:before {
    background: none;
  }
  
  #jak-dzialamy-www .card:not(.last-child) {
	padding-bottom: 1.5rem;
  }
}


/* -------------------------------------- Strona WWW -  PAKIET WSPARCIA TECZNICZNEGO WWW */

#pakiet-wsparcia-www .pasek-margin-wrap {
    background-color: #f39314; 
	
}

#pakiet-wsparcia-www .wrap-x {
	background-color: white;
	background-image: url(img/jak-dzialamy.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#pakiet-wsparcia-www .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.85);
    padding: 100px 0px;
    color: #333333;
}


/* ------------------------------------ SKLEP INTERNETOWY */

#page-sklep-internetowy {
	border-top: 2px solid #f39314;
}


#page-sklep-internetowy .wrap-x {
	background-color: white;
	background-image: url(img/sklep-internetowy-bg.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-sklep-internetowy .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.5);
    padding: 100px 0px;
    color: white;
}

/* ------------------------- Strona GRAFIKA */

#page-grafika-header {
	border-top: 2px solid #f39314;
}

#page-grafika-header .wrap-x {
	background-color: white;
	background-image: url(img/grafika-header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-grafika-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.5);
    padding: 100px 0px;
    color: white;
}


/* ----------------------------- Grafika LOGO */
#page-logo .pasek-margin-wrap {
	background-color: #f39314;
}

#page-logo .wrap-x {
	background-image: url(img/###.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-logo .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}


#page-logo #page-logo-info span {
	margin: 20px 0 20px 0;
    display: inline-block;
    border-bottom: 1px dotted #333333;
    width: 100%;
    font-size: 1.2rem;
    padding-bottom: 17px;
	text-align: center;
}

#page-logo #page-logo-info p {
	border-left: 4px solid #f39314;
    padding-left: 10px;
}


#page-logo #logo-pakiet-mini {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid silver;
	padding: 10px;
}

#page-logo #logo-pakiet-logo {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid gold;
	padding: 10px;
}

#page-logo #logo-pakiet-plus {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid #7ba8b5;
	padding: 10px;
}

#page-logo #socialmedia-kreacja-wrap {
	background-color: white;
    padding: 10px;
	border: 1px solid #F39314;
}

#page-logo #logo-pakiet-plus span, 
#page-logo #logo-pakiet-mini span,
#page-logo #logo-pakiet-logo span {
	text-align: center;
    padding-top: 20px;
    border-top: 1px dotted #333333;
    margin-top: 17px;
    margin: 0px;
	
}


/* - --------------------- -------GRAFIKA ULOTKI */

#page-ulotki .pasek-margin-wrap {
		background-color: #f39314;
}

#page-ulotki .ulotki-oferta-kreacja-wrap {
	background-color: white;
    padding: 10px;
    border: 1px solid #F39314;
}

#page-ulotki .wrap-x {
	background-image: url(img/###.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-ulotki .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}

#page-ulotki #ulotki-oferta-kreacja-wrap {
	background-color: white;
    padding: 10px;
    border: 1px solid #F39314;
}


/* - --------------------- -------GRAFIKA KATALOGI */

#page-katalogi .pasek-margin-wrap {
		background-color: #f39314;
}

#page-katalogi #katalog-oferta h4 {
	font-weight: 600;
	margin: 20px 0 20px 0;
    display: inline-block;
    border-bottom: 1px dotted #333333;
    width: 100%;
    font-size: 1.2rem;
    padding-bottom: 17px;
    text-align: center;
}

#page-katalogi .katalog-oferta-wrap {
	background-color: white;
    padding: 10px;
    border: 1px solid #F39314;
}

#page-katalogi .wrap-x {
	background-image: url(img/###.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-katalogi .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}


/* - --------------------- -------GRAFIKA REKLAMA ZEWNĘTRZNA */

#page-reklama-zewnetrzna .pasek-margin-wrap {
		background-color: #f39314;
}


#page-reklama-zewnetrzna .katalog-oferta-wrap {
	background-color: white;
    padding: 10px;
    border: 1px solid #F39314;
}

#page-reklama-zewnetrzna .wrap-x {
	background-image: url(img/###.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-reklama-zewnetrzna .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}


/* - --------------------- -------GRAFIKA MEDIA SPOLECZNOSCIOWE */

#page-media-spol .pasek-margin-wrap {
		background-color: #f39314;
		transform: scaleY(-1);
}


#page-media-spol .katalog-oferta-wrap {
	background-color: white;
    padding: 10px;
    border: 1px solid #F39314;
}

#page-media-spol .wrap-x {
	background-image: url(img/###.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-media-spol .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}

/* ------------------- GRAFIKA OPAKOWANIA PRODUKTU */

#page-opakowanie-produktu .pasek-margin-wrap {
		background-color: #f39314;
}


#page-opakowanie-produktu .wrap-x {
	background-image: url(img/###.jpg);
    /* background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-opakowanie-produktu .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}

#page-opakowanie-produktu .opakowanie-produktu-wrap {
    background-color: white;
    padding: 10px;
    border: 3px solid #F39314;
}


/* ------------------------- Strona SOCIAL MEDIA */

#social-media-header {
	border-top: 2px solid #f39314;
}

#social-media-header .wrap-x {
	background-color: white;
	background-image: url(img/social-media.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#social-media-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.5);
    padding: 100px 0px;
    color: white;
}

/* ------------------------- Social Media OFERTA */

#page-social-media .wrap-x {
	background-image: url(img/social-media.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-social-media .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}


#page-social-media #kreacja-graficzna p {
	border-left: 4px solid #f39314;
    padding-left: 10px;
}

#page-social-media #socialmedia-pakiet-start {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid silver;
	padding: 10px;
}

#page-social-media #socialmedia-pakiet-standard {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid gold;
	padding: 10px;
}

#page-social-media #socialmedia-pakiet-extra {
	background-color: rgba(255, 255, 255, 1);
    border: 3px solid #7ba8b5;
	padding: 10px;
}

#page-social-media #socialmedia-pakiet-extra span, #page-social-media #socialmedia-pakiet-start span, #socialmedia-pakiet-standard span {
	text-align: center;
    padding-top: 20px;
    border-top: 1px dotted #333333;
    margin-top: 17px;
    margin: 0px;
	
}

#page-social-media #socialmedia-kreacja-wrap {
	background-color: white;
    padding: 10px;
	border: 1px solid #F39314;
}

#page-social-media #socialmedia-kreacja-wrap span {
	display: block;
	text-align: center;
	padding: 1rem 0;
	border-bottom: 1px dotted #333333;
	margin-bottom: 1rem;
}

/* ------------------------- Strona REALIZACJE */

#realizacje-header {
	border-top: 2px solid #f39314;
}

#realizacje-header .wrap-x {
	background-color: white;
	background-image: url(img/social-media.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#realizacje-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.5);
    padding: 100px 0px;
    color: white;
}

#page-realizacje .wrap-x {
	background-image: url(img/social-media.jpg);
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-realizacje .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 120px 0px;
}

#page-realizacje a {
	color: #333333;
}

#page-realizacje .tabcontent div.row {
	padding: 15px;
    border-bottom: 1px solid silver;
    margin: 15px;
}

#realizacje-grafika h4 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* ------------------------- Strona KONTAKT */

#kontakt-header {
	border-top: 2px solid #f39314;
}

#kontakt-header .wrap-x {
	background-color: white;
	background-image: url(img/social-media.jpg);
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#kontakt-header .wrap-x-shadow {
	background-color: rgba(0, 0, 0, 0.5);
    padding: 100px 0px;
    color: white;
}

#page-kontakt a {
	color: #333333;
}

#page-kontakt a:hover {
	color: #f39314;
}


#page-kontakt .wrap-x {
	background-image: url(img/oferta.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-kontakt .wrap-x-shadow {
	background-color: rgba(255, 255, 255, 0.7);
	padding: 120px 0px;
}

#page-kontakt textarea.wpcf7-textarea {
	width: 359px;
	height: 135px;
}


#page-kontakt .wpcf7-submit {
	width: 150px !important;
	padding: 10px;
	border-color: #707070;
}

/* KONIEC ----------------------------------------- */

section#search-1 article {
	height: 100%;
    border: 1px solid #f39314;
    border-radius: 0;
}
section#search-1 h3 {
	font-size: 1.9em !important;
    text-align: center;
    padding: 0px 0px 15px 0px;
    color: #f39314;
    font-weight: bold;
    border-bottom-style: dotted;
    border-bottom: 1px dotted #f39314;
    border-bottom-width: 2px;
    margin: 0 20px 20px 20px;
}

 section#search-1 a:hover {
	text-decoration: none !important;
	text-shadow: 1px 1px 1px black;
}
 section#search-1 small a:hover  {
	 text-shadow: none;
 }

/* -------------------------------- STOPKA */
#stopka {
	background-color: black;
	margin: 0 auto;
	height: auto;
}

#stopka p {
	color: white;
}

#stopka h4 {
	color: #f39314;
    font-weight: bold;
    font-size: 1.1em;
}


.stopka-k-1 {
	border-right: 1px solid #f39314;
}

#stopka .stopka-k-2 p {
		display: inline-block;
		font-size: 1.1em;
		color: white;
		transition: 0.5s;
}

#stopka .stopka-k-2 p:hover {
		color: #f39314;	
}

#stopka .stopka-k-2 i {
	color: white;
	font-size: 1.1em;
	transition: 0.5s;
}

#stopka .stopka-k-2 i:hover {
		color: #f39314;
}

#stopka .stopka-k-2 a {
	text-decoration: none;
	border: none;
}

#stopka .stopka-k-2 a:hover {
	text-decoration: none;
	border: none;
}

#stopka .stopka-k-2 a:link {
	text-decoration: none;
	border: none;
}

.stopka-k-3 img{
	height: 18px;
	width: auto;	
}


/* unvisited link */
#stopka a:link {
	color: #f39314;
	border-bottom: dotted;
    border-width: 0.1em;
    border-color: #808080;
}

#stopka a:hover{
	color: #ff501c;
	text-decoration: none;
    border-color: white !important;
	border-bottom: solid;
	border-width: thin;
}

/* visited link */
#stopka a:visited {
  color: #f39314;
}


/* selected link */
#stopka a:active {
  color: #ff501c;
}

#logo-stopka {
	 width: 60%;
	 height: auto;
}



/* ------------------------------  STRONY ---- */

.hr-white {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg,transparent, rgb(255, 255, 255), transparent);
}

.hr-black {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg,transparent, rgb(0, 0, 0), transparent);
}

.hr-orange {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg, transparent, #f39314, transparent);
}

.hr-organe-short {
	width: 45%;
    margin: 0px auto 20px auto;
    padding: 0px;
    border: 0;
    height: 1px;
	background-image: linear-gradient(90deg, transparent, #f39314, transparent);
} 
/*
#hr-white {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg,transparent, rgb(255, 255, 255), transparent);
}

#hr-black {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg,transparent, rgb(0, 0, 0), transparent);
}

#hr-orange {
    width: 80%;
    margin: 0px auto 4px auto;
    padding: 0px;
	border: 0;
    height: 1px;
	background-image: linear-gradient(90deg, transparent, #f39314, transparent);
}

#hr-organe-short {
	width: 45%;
    margin: 0px auto 20px auto;
    padding: 0px;
    border: 0;
    height: 1px;
	background-image: linear-gradient(90deg, transparent, #f39314, transparent);
}
*/

/* TABELKI oferta, wsparcie */
.tg  {
	border-collapse: separate;
	border-spacing: 2px 0px;
	padding: 5px;
}
			
.tg td{
	font-size: 17px;
	padding: 10px 15px;
	overflow: hidden;
	word-break: normal;
}
				
.tg th {
	font-size: 20px;
	font-weight: bolder;
	font-weight: normal;
	padding: 10px 5px;
	overflow: hidden;
	word-break: normal;
}


#strony-www-pakiet-wsparcia-tabela-bronze, #strony-www-pakiet-wsparcia-tabela-silver, #strony-www-pakiet-wsparcia-tabela-gold {
	display: none;	
}

#strony-www-oferta-tabela-wizytowka, #strony-www-oferta-tabela-standard, #strony-www-oferta-tabela-premium {
	display: none;
}


	#strony-www-all {
		display: none;
	}

	#kontakt {
		background-color: white;
		padding: 0px;
		margin: 0 auto;
	}
	
	#kontakt p {	
		font-size: 21px;
		width: 32%;
		text-align: left;
		line-height: 1.3em;
		padding: 5px;
		display: inline-block;
		margin: 0px auto;
	}
	
	#kontakt i {
		color: #F39314;
		font-size: 54px;
	}
	
	#kontakt a {
		color: black;
	}
	
	#kontakt a:hover > #kontakt-txt span {
		color: red;
	}
	
	
	
	#kontakt #kontakt-txt {
	border-top: 1px solid #F39314;
	border-bottom: 1px solid #F39314;
	}
	
	.pasek-margin {	
	height: 0px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	}
	
	.pasek-margin-wrap {
	background-color: white;
    clip-path: polygon(100% 50px, 0 25px, 0 0, 100% 25px);
    height: 50px;
    position: relative;
    top: -25px;
	}	
	
	

@media (max-width: 1199px) { 
/* ------------------------------------  1199px -- */

	.oferta-1-h4 {
		font-size: 1.29em !important;
		}
		
	.oferta-1-img {
		left: 43px;
		width: 150px;
		top: -69px;
	}

	.oferta-1-h4 {
		margin-top: 56px;
	}
		
	#oferta-www-img {
		width: 177px;
	}
		
	#oferta-www-txt {
		width: 249px;
	}
	
	#kontakt p{
		font-size: 18px;
	}
	
	#kontakt i{
		font-size: 44px;
	}
	
	
	#contact-form-1 #dane-kontaktowe {
		padding-right: 40px;
	}

} /* KONIEC -----------------------------  1199px -- */



@media (max-width: 991px) { /* ------------------------------------  991px -- */

	fieldset {
	min-width: 100%;
	}
	
	.row {
	margin-left: -44px;
	}
	

	.tabcontent div.row {
		margin-left: -15;
	}
	
	#oferta-1 {
		padding-top: 64px;
	}	
	
	#pakiet-www .container {
		padding: 18px;
	}
	
	#pakiet-www .tg .tg-0lax {
		font-weight: normal !important;
	}
	
	
	.top-1-btn {

		margin: 10px 0px !important;
		min-width: 100%;
		padding: 16px auto 0px !important;
	}
	
	.top-2-btn {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		width: 100%;
	}
	
	.oferta-1-card {
		margin-bottom: 20px;
		flex: auto;
		max-width: 100%;
	}
	
	.oferta-1-img img {
		margin: 10px auto 20px auto;
		display: block;
	}
	
	.oferta-1-img{
		display: contents;
		width: 100%;
		margin-bottom: 30px;
	}
		
	.oferta-1-card-wrapper {
		margin-top: 0px;
	}
	
	#oferta-1 .img-fluid {
		max-width: 55%;
	}
	
	.oferta-1-h4 {
		margin-top: 18px;
	}
		
	#oferta-www-img {
		width: 137px;
	}
		
	#oferta-www-txt {
		font-size: 3.4vw;
		width: 157px;
	}
	
	#oferta-www-header {
		top: -114px
	}
	
	
	#oferta-www-wrap-orange {
		padding-top: 16px !important;
	}
	
	#oferta-www-wrap-white {
		padding-top: 16px !important;
	}
	
	#stopka .row {
		font-size: 1em;	
	}
	
	#logo-stopka {
		width: 100%;
	}

	#kontakt p{
		font-size: 14px;
	}
	
	#kontakt i{
		font-size: 36px;
	}
	
	#contact-form-1 #dane-kontaktowe {	
		border: none;
		padding: 15px;
	}
	
	#contact-form-1 #jak-dojechac {	
		padding: 15px;
	}
	
} /* KONIEC ---------------------------------------  OFERTA-1 -- */



@media (max-width: 767px) { /* ------------------------------------  767px OFERTA-1 -- */
	
	.row {
	margin-left: -15px;
	}
	
	.pt-135px {
		margin-top: 135px;
	}
	
	.oferta-1-h4 {
    margin-top: 22px;
	}
	
	#oferta-www-wrap-orange {
	padding-top: 16px !important;
	}
	
	#oferta-www-txt {
		font-size: 36px;
		min-width: 165px;
	}
	

	
	.stopka-k-1 {
		border: none;
	}
	
	#logo-stopka {
		max-width: 60%;
	}
	

	.tg td {
		font-size: 13px !important;
		padding: 5px 5px !important;
		overflow: hidden !important;
		word-break: normal !important;
		font-weight: normal !important;
	}


	/*WWW - WSPARCIE */
	#strony-www-pakiet-wsparcia-tabela-all {
		display: none;
	}

	#strony-www-pakiet-wsparcia-tabela-bronze, #strony-www-pakiet-wsparcia-tabela-silver, #strony-www-pakiet-wsparcia-tabela-gold {
		display: table;	
	}

	/*WWW - OFERTA */
	#strony-www-oferta-tabela-all {
		display: none;
	}
	
	#strony-www-oferta-tabela-wizytowka, #strony-www-oferta-tabela-standard, #strony-www-oferta-tabela-premium {
		display: table;
	}
	
	.tg-9wq8 {
	padding-bottom: 0px !important; font-weight: bold !important;
	}
	
	#strony-www-col {
		display: none;
	}
	
	#strony-www-all {
		display: block;
	}
	
	#contact-form-1 #dane-kontaktowe {	
		text-align: center;
	}
	
	#contact-form-1 #jak-dojechac {	
		text-align: center;
	}

	
	#kontakt div {
		text-align: center;
		margin: 0 auto;
		border: 0px;
	}
	
	#kontakt img {
		display: none;
	}
	
	#kontakt p {
		display: block;
		width: 243px;
		text-align: center;
		padding: 12px;
		font-size: 18px;
	}
	
	#kontakt #kontakt-txt {
		border: 0px;
		
	}
	
	#kontakt i{
		font-size: 44px;
	}
	
	
	
} /* KONEIC -------------------------------  767px OFERTA-1 -- */



@media (max-width: 575px) { /* ---------------------------------------------   MEDIA MAX 575px SM   */

	#dlaczego-my img {
		max-height: 200px;
	}
		
		@keyframes bombelek1 {
			0%    {left:0%; top:10%; transform: scale(1);}
			25%   {left:65%; top:90%; transform: scale(0.7);}
			75%   {left:33%; top:75%; transform: scale(0.4);}
			100%  {left:0%; top:10%; transform: scale(1);}
		}
		
		@keyframes bombelek2 { /* WHITE */
			0%    {left:5%; top:18%; transform: scale(0.2);}
			20%   {left:44%; top:58%; transform: scale(0.6);}
			40%   {left:23%; top:75%; transform: scale(0.5);}
			100%  {left:5%; top:18%; transform: scale(1);}
		}
		
		@keyframes bombelek3 {
			0%    {left:5%; top:11%; transform: scale(0.7);}
			30%   {left:54%; top:78%; transform: scale(0.4);}
			65%   {left:33%; top:25%; transform: scale(0.2);}
			100%  {left:5%; top:11%; transform: scale(0.7);}
		}
	
	#oferta-www-header {	
		left: 0px; 
	}
	
	.top-1-btn {
		margin: 0 auto !important;
		margin-top: 10px !important;

	}
	
	.oferta-1-h4 {
		margin-top: 20px;
	}		
	
	#oferta-1 .img-fluid {
	    max-width: 55%;
	}
	
	#top-1-blockquote-p {
		font-size: 1.76em !important;
		line-height: 40px !important;
	}
	
	#top-1-h1 {
		font-size: 1.62em !important;
		padding: 10px !important;
	}
	
	#top-1-footer{
		font-size: 1.2em !important;
		margin: 0 0 20px 0 !important;
	}
	
	.wpis
	{
		margin: 40px 20px;
		text-align: left;
		font-size: 15px;
	}
	
	.float-left, .float-right
	{
		max-width: 50%;
	}
	
	.blockquote
	{
		font-size: 17px;
	}
	
	.list-group
	{
		text-align: center;
	}
	
	
	#page-kontakt .wpcf7-form input, #page-kontakt textarea.wpcf7-textarea {
		width: 100%;
	}
		
} /* KONIEC -- ---------------------------------------  MEDIA MAX 575px SM   */








/* ---------------------------------------------------- FACEBOOK WIDGET   */

#facebook_slider_widget {
    color: gray;
    position: fixed;
    left: 0;
    width: 270px;
    margin-left: -271px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    top: 50%;
    height: 590px;
    margin-top: -295px;
    z-index: 99999;
}

#facebook_slider_widget div {
    display: table-cell;
    vertical-align: middle;
}

#facebook_slider_widget img {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    border-radius: 0px 6px 6px 0px;
	background: rgba(255, 255, 255, 0.7);
}

#facebook_slider_widget img:hover {
    box-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
    border-radius: 0px 6px 6px 0px;
	cursor: pointer;
}