#formularz {
        width:260px; /* ustawiamy szerokość formularza */
        margin:0 auto; /* jeżeli nasz formularz ma ustawioną szerokość wyśrodkowujemy go */
        background-color:#fff; /* dodajemy kolor tła naszemu formularzowi */
        border:2px solid #ccc; /* dodajemy obramowanie o szerokości 2px */
        border-radius:10px; /* zaokrąglamy tło naszego formularza */
		padding:20px; /* dodajemy margines wewnątrz naszego formularza */
        margin-top:20px; /* dodajemy margines górny naszego formularza */
}

#formularz label {
    display:block;/* ustawiamy by label rozpoczynał się od nowej linii*/
    margin-bottom:5px;/* dodajemy margines dolny */
    font-weight:bold; /* pogrubiamy czcionkę */
    text-transform: uppercase; /* zamieniamy wszystkie litery na duże */
    font-size:12px; /* ustawiamy wielkość czcionki */
    color:#555555; /* ustawiamy kolor czcionki */
}

#formularz textarea,
#formularz input {
	padding:5px; /* dodajemy margines wewnątrz naszego pola */
	border-radius:3px; /* dodajemy zaokraglone rogi */
	border:1px solid #ccc; /* dodajemy obramowanie */
	margin-bottom:25px; /* dodajemy margines dolny */
	width:245px; /* ustalamy szerokość */
}

#formularz input#submit {
	width:255px; /* ustalamy szerokość */
	cursor:pointer; /* zmieniamy kursor */
	margin-bottom:0px;/* resetujemy margines dolny */
}

#formularz p.copy {
	color:#555555; /* ustawiamy kolor czcionki */
	margin-bottom:0px; /* resetujemy margines dolny */
	font-size:12px; /* ustawiamy rozmiar czcionki */
	text-align: center; /* wyśrodkowywujemy tekst */
}

#formularz p.copy a {
	color:#555555;/* ustawiamy kolor czcionki */ 
	text-decoration: none; /* usuwamy podkreślenie linku */
	font-weight:bold; /* pogrubiamy czcionkę */
}  



#karuzela {
	background-image: url(images/ale_haft_nici.jpg);
	background-size: cover;
	margin-top: 3.5rem;
}
#nav {
	background-color: #02283F;
	padding-left: 100px;
	
}
/* The navigation bar */
.navbar {
	overflow: hidden;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index: 1000;
}
/* Links inside the navbar */
.navbar a {
	display: block;
	text-decoration: none;
}
/* Main content */
.main {
	margin-top: 30px; /* Add a top margin to avoid content overlay */
}

#zalety {
	background-image: url(images/ale_haft_wspolpraca.jpg);
	background-size: cover;
	width: 100%;
	height: auto;
	color: #FFFFFF;
	padding-top: 3rem;
	padding-bottom: 3rem;
	margin-bottom: 20px;
}
#kontakt {
	margin: 5rem;
}
#wspolpraca {
	border-style: solid;
	margin: 0rem 0rem 3rem 0rem;
	padding-bottom: 1rem;
	padding-top: 1rem;
	font-weight: 600;
	letter-spacing: 3px;
}
.button-kontakt {
	background-color: #02283F;
	border: none;
	color: white;
	padding: 1rem 10rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	margin: 10px 2px;
	cursor: pointer;
	box-shadow: 10px 10px 5px grey;
}
.button {
	background-color: #02283F;
	border: none;
	color: white;
	padding: 1rem 2rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: .9rem;
	margin: 10px 2px;
	cursor: pointer;
	box-shadow: 10px 10px 5px grey;
}
.copyright {
	min-height: 40px;
	background-color: #A1BBBE;
}
.copyright p {
	color: #FFF;
	padding: 10px 0;
	margin-bottom: 0px;
}
.button {
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}
.button:hover {
	background-color: #01B69D;
	color: white;
}
.button-kontakt:hover {
	background-color: #01B69D;
	color: white;
}
input[type=text], select, textarea, name, comments {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */
	border: 1px solid #ccc; /* Gray border */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
}
#email {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */
	border: 1px solid #ccc; /* Gray border */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: #02283F;
	border: none;
	color: white;
	padding: 1rem 2rem;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: .9rem;
	margin: 10px 2px;
	cursor: pointer;
	box-shadow: 10px 10px 5px grey;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #01B69D;
}
/* Add a background color and some padding around the form */
.contact {
	background-color: #A1BBBE;
	padding: 20px;
	opacity: 0.8;
}
.preview {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}



@media screen and (max-width: 996px) {
.preview {
	margin-bottom: 20px;
}
}
.tab-content {
	overflow: hidden;
}
.tab-content img {
	width: 100%;
	-webkit-animation-name: opacity;
	animation-name: opacity;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
}
.card {
	margin-top: 50px;
	background: #eee;
	padding: 3em;
	line-height: 1.5em;
}

@media screen and (min-width: 997px) {
.wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
}
.details {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.colors {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}
.product-title, .price, .sizes, .colors {
	font-weight: bold;
}
.checked, .price span {
	color: #01B69D;
}
.product-title, .rating, .product-description, .price, .vote, .sizes {
	margin-bottom: 15px;
}
.product-title {
	margin-top: 0;
}
.size {
	margin-right: 10px;
}
.size:first-of-type {
	margin-top: 20px;
}
.color {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	height: 2em;
	width: 2em;
}
.ORA {
	background: #F7941D;
}
.NAV {
	background: #21375D;
}
.BOG {
	background: #004A41;
}
.SRE {
	background: #DE1F3D;
}
.BLM {
	background: #00203C;
}
.BLO {
	background: #000000;
}
.LBL {
	background: #42A0D9;
}
.DBY {
	background: #3D274E;
}
.YEL {
	background: #FFF56D;
}
.KIW {
	background: #7AC143;
}
.BRR {
	background: #0067B3;
}
.OCB {
	background: #0084A9;
}
.BGR {
	background: #4B1325;
}
.HGR {
	background: #505A2A;
}
.RGY {
	background: #303C42;
}
.WHI {
	background: white;
}
.SPK {
	background: #EF4D8F;
}
.KEG {
	background: #00AE4D;
}
.CBY {
	background: #DBE129;
}
.HWB {
	background: #007D9F;
}
.CSR {
	background: #C72334;
}
.GRS {
	background: #4B4E55;
}
.CUP {
	background: #994575;
}
.MAH {
	background: #121E34;
}
.ROH {
	background: #094A70;
}
.DOG {
	background: #7C8180;
}
.MAB {
	background: #002A40;
}
.tooltip-inner {
	padding: 1.3em;
}
 @-webkit-keyframes opacity {
 0% {
 opacity: 0;
 -webkit-transform: scale(3);
 transform: scale(3);
}
 100% {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
 @keyframes opacity {
 0% {
 opacity: 0;
 -webkit-transform: scale(3);
 transform: scale(3);
}
 100% {
 opacity: 1;
	 -webkit-transform: scale(1);}}


html,
body {
	font-size: 14px !important;
}
h1 {
	font-size: 1.602em;
}
h2 {
	font-size: 1.424em;
}
h3 {
	font-size: 1.266em;
}
h4 {
	font-size: 1.125em;
}
h5 {
	font-size: 0.889em;
}
h6 {
	font-size: 0.79em;
}
.display-1 {
	font-size: 3.906em;
}
.display-2 {
	font-size: 3.125em;
}
.display-3 {
	font-size: 2.5em;
}
.display-4 {
	font-size: 2em;
}


@media (min-width: 48em) {
	h1 {
	  font-size: 2.441em;
	}
	h2 {
		font-size: 1.953em;
	}
	h3 {
		font-size: 1.563em;
	}
	h4 {
		font-size: 1.25em;
	}
	.display-1 {
		font-size: 6em;
	}
	.display-2 {
		font-size: 5.5em;
	}
	.display-3 {
		font-size: 4.5em;
	}
	.display-4 {
		font-size: 3.5em;
	}
}

/*large*/

@media (min-width: 62em) {
	html,
	body {
		font-size: 16px !important;
	}
}

/*extra large*/

@media (min-width: 75em) {
	html,
	body {
		font-size: 18px !important;
	}
}


@media screen and (min-width: 768px) {
	#karuzela {
		display: none;
		
	}
}

@media screen and (max-width: 768px) {
#carousel-id{ display: none; }
}