@keyframes jiggle1{
    0%{
        transform:rotate(0deg)
    }
    50%{
        transform:rotate(-3deg)
    }
    100%{
        transform:rotate(5deg)
    }
}
@keyframes jiggle2{
    0%,100%{
        transform:rotate(5deg)
    }
    50%{
        transform:rotate(-5deg)
    }
}
.rainbows.new {
	overflow: hidden;
}
.rainbows.new article{
	max-width: 943px;
    width: 100%;
    margin: auto;
}
.rainbows.new .rainbow_body {
	position: relative;
	/* background: url('../img/svg/kula/uklad.png'); */
	height: 510px;
	background-position: center top;
}
.rainbows.new .rainbow_body .rainbow{
	user-select: none;
	float: left;
	width: 25%;
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
}
.rainbows.new .rainbow_body .rainbow, .rainbows.new .rainbow_body .rainbow *{
	-webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rainbows.new .rainbow_body .rainbow *::selection , .rainbows.new .rainbow_body .rainbow::selection {
    background-color:transparent;
}
.rainbows.new .rainbow_body .rainbow.emptyz, .rainbows.new .rainbow_body .rainbow.emptyz * {
	cursor: inherit;
}
.rainbows.new .rainbow_body .rainbow.emptyz:hover{
	filter: grayscale(50%);
	transition: all 1s;
}
.rainbows.new .rainbow_body .rainbow:not(.emptyz):hover, .rainbows.new .rainbow_body .rainbow:not(.emptyz):focus {
	z-index:2;
}
.rainbows.new .rainbow_body .rainbow:not(.emptyz):hover a, .rainbows.new .rainbow_body .rainbow:not(.emptyz):focus a {
	transform: scale(1.3, 1.3);
	transition: all 1s;
}
.rainbows.new .rainbow_body .rainbow a {
	display: block;
	transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 2;
}
.rainbows.new .rainbow_body .rainbow{

}
.rainbows.new .rainbow_body .rainbow.anim .productThumb{
    animation-name: jiggle1, jiggle2;
    animation-duration: 0.8s, 0.8s;
    animation-timing-function: linear, linear;
    animation-delay: 0s;
    animation-iteration-count: 1, 5;
    animation-direction: normal, normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
    transition: all 1s;
	display: block;
	position: relative;
}
.rainbows.new .rainbow_body .rainbow:not(.emptyz):hover .productThumb, .rainbows.new .rainbow_body .rainbow:not(.emptyz):focus .productThumb {
	animation: jiggle1 0.8s linear, jiggle2 0.8s linear infinite both;
	animation-delay: 0s;
	transition: all 1s;
	display: block;
	position: relative;
}
.rainbows.new .rainbow_body .rainbow .main {
	position: absolute;
	top: 0;
	left: 0;
	transition: all 1s;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}
.rainbows.new .rainbow_body .rainbow:hover .main, .rainbows.new .rainbow_body .rainbow:focus .main {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	/* transform: scale(1.3, 1.3); */
	/* transition: 2s; */
}


.wy-tooltip {
/* 	border: 1px solid #F1D031; */
	color: #898a8d;
	box-shadow: 0 2px 3px #999;
	position: absolute;
	padding: 5px;
	text-align: left;
	border-radius: 5px;
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 z-index:5;
}
.wy-hide { display: none; }


#rb01 {height: 106.97px;width: 128px;transform: rotate(10deg);}
#rb02 {height: 81.41px;width: 139px;transform: rotate(20deg);}
#rb03 {height: 89.93px;width: 95px;transform: rotate(-20deg);}
#rb04 {height: 105.07px;width: 111px;}
#rb05 {height: 89.93px;width: 95px;transform: rotate(30deg);}
#rb06 {height: 105.07px;width: 111px;transform: rotate(20deg);}
#rb07 {height: 106.97px;width: 128px;transform: rotate(10deg);}
#rb08 {height: 91.82px;width: 149px;transform: rotate(10deg);}
#rb09 {height: 106.97px;width: 128px;transform: rotate(30deg);}
#rb10 {height: 106.97px;width: 128px;transform: rotate(-20deg);}
#rb11 {height: 105.07px;width: 111px;}
#rb12 {height: 81.41px;width: 139px;transform: rotate(-10deg);}
#rb13 {height: 105.07px;width: 111px;transform: rotate(-30deg);}
#rb14 {height: 106.97px;width: 128px;transform: rotate(20deg);}
#rb15 {height: 91.82px;width: 149px;transform: rotate(30deg);}
#rb16 {height: 106.97px;width: 128px;transform: rotate(40deg);}
#rb17 {height: 81.41px;width: 139px;transform: rotate(20deg);}
#rb18 {height: 89.93px;width: 95px;transform: rotate(10deg);}
#rb19 {height: 91.82px;width: 149px;transform: rotate(20deg);}
#rb20 {height: 89.93px;width: 95px;transform: rotate(-10deg);}
#rb21 {height: 105.07px;width: 111px;transform: rotate(-20deg);}
#rb22 {height: 81.41px;width: 139px;transform: rotate(10deg);}
#rb23 {height: 81.41px;width: 139px;transform: rotate(-10deg);}
 
.pos01 {left: 1%;}
.pos02 {top: 29%;}
.pos03 {top: 52%;left: 5%;  display: none; }
.pos04 {top: 56%;}
.pos05 {top: 15%;left: 18%; display: none; }
.pos06 {left: 18%;top: 41%;}
.pos07 {top: 65%;left: 16%;}
.pos08 {  left: 23%; top: 9%;}
.pos09 {left: 31%;top: 28%;}
.pos10 {top: 54%;left: 27%;}
.pos11 {left: 43%;top: 20%;}
.pos12 {left: 42%;top: 48%;}
.pos13 {left: 42%;top: 71%;}
.pos14 {left: 59%;top: 8%;}
.pos15 {top: 37%;left: 56%;}
.pos16 {left: 56%;top: 59%;}
.pos17 {top: 16%;left: 72%;}
.pos18 {left: 75%;top: 39%; display: none; }
.pos19 {left: 69%;top: 64%;}
.pos20 {top: 5%;left: 88%; display: none; }
.pos21 {top: 30%;left: 88%;}
.pos22 {left: 85%;top: 57%;}
.pos23 {top: 38%; left: 72%;}


/* TYMCZASOWE - brak wszystkich zapachów */
/* .pos01 {left: 1%;} */
/* .pos02 {top: 37%;left: 67%;} */
/* .pos03 {top: 29%;left: 3%;} */
/* .pos04 {top: 6%;left: 34%;} */
/* .pos05 {top: 11%;left: 19%;} */
/* .pos06 {left: 17%;top: 39%;} */
/* .pos07 {top: 65%;left: 16%;} */
/* .pos08 {left: 28%;top: 5%;} */
/* .pos09 {left: 31%;top: 28%;} */
/* .pos10 {top: 54%;left: 27%;} */
/* .pos11 {left: 70%;top: 9%;} */
/* .pos12 {left: 31%;top: 34%;} */
/* .pos13 {left: 2%;top: 1%;} */
/* .pos14 {left: 59%;top: 8%;} */
/* .pos15 {top: 37%;left: 56%;} */
/* .pos16 {left: 56%;top: 59%;} */
/* .pos17 {top: 8%;left: 51%;} */
/* .pos18 {left: 51%;top: 31%;} */
/* .pos19 {left: 69%;top: 64%;} */
/* .pos20 {top: 5%;left: 87%;} */
/* .pos21 {top: 31%;left: 85%;} */
/* .pos22 {left: 57%;top: 56%;} */
/* .pos23 {top: 56%;left: 36%;} */
/* TYMCZASOWE - brak wszystkich zapachów */


@media only screen and (max-width: 850px) {
	.rainbows.new .rainbow_body {/* background: url('../img/svg/kula/uklad768.png'); */height: 740px;background-position: center top;background-repeat: no-repeat;background-size: cover;/* overflow: hidden; */}
	.pos01 {left: 38%;top: 73%;transform: rotate(30deg)!important;}
	.pos02 {top: 71%;left: 4%;}
	.pos03 {top: 84%;left: 20%;}
	.pos04 {top: 83%;left: 55%;}
	.pos05 {top: 11%;left: 10%;}
	.pos06 {left: 10%;top: 31%;}
	.pos07 {top: 50%;left: 7%;}
	.pos08 {left: 23%;top: 4%;}
	.pos09 {left: 26%;top: 20%;}
	.pos10 {top: 42%;left: 22%;}
	.pos11 {left: 41%;top: 14%;}
	.pos12 {left: 41%;top: 36%;}
	.pos13 {left: 40%;top: 54%;}
	.pos14 {left: 60%;top: 6%;}
	.pos15 {top: 27%;left: 57%;}
	.pos16 {left: 57%;top: 62%;}
	.pos17 {top: 12%;left: 77%;}
	.pos18 {left: 81%;top: 29%;}
	.pos19 {left: 73%;top: 48%;}
	.pos20 {top: 64%;left: 27%;}
	.pos21 {top: 46%;left: 56%;}
	.pos22 {left: 72%;top: 65%;}
	.pos23 {top: 81%;left: 78%;}
}

@media only screen and (max-width: 680px) {.rainbows.new .rainbow_body .rainbow a { transform: scale(0.85, 0.85);} }
@media only screen and (max-width: 650px) {.rainbows.new .rainbow_body { left: -20px;} }
@media only screen and (max-width: 550px) {
	.rainbows.new .rainbow_body .rainbow a {transform: scale(1.2, 1.2);}
	.rainbows.new .rainbow_body {/* background: url('../img/svg/kula/ukladphone.png'); */left: 10px;height: 1200px;background-position: center;background-repeat: no-repeat;background-size: cover;}
	.pos01 {left: 7%;top: 2%;transform: rotate(10deg)!important;}
	.pos02 {top: 16%;left: 5%;}
	.pos03 {top: 81%;left: 33%;}
	.pos04 {top: 37%;left: 5%;}
	.pos05 {top: 7%;left: 42%;}
	.pos06 {left: 40%;top: 19%;}
	.pos07 {top: 33%;left: 35%;}
	.pos08 {left: 63%;top: 2%;}
	.pos09 {left: 70%;top: 11%;}
	.pos10 {top: 23%;left: 63%;}
	.pos11 {left: 71%;top: 36%;}
	.pos12 {left: 29%;top: 46%;}
	.pos13 {left: 70%;top: 76%;}
	.pos14 {left: 43%;top: 68%;}
	.pos15 {top: 72%;left: 1%;}
	.pos16 {left: 71%;top: 47%;}
	.pos17 {top: 88%;left: 58%;}
	.pos18 {left: 72%;top: 63%;}
	.pos19 {left: 3%;top: 52%;}
	.pos20 {top: 86%;left: 8%;}
	.pos21 {top: 56%;left: 45%;}
	.pos22 {left: 13%;top: 63%;}
	.pos23 {top: 26%;left: 7%;transform: rotate(10deg)!important;}
}
@media only screen and (max-width: 500px) {
	.rainbows.new .rainbow_body .rainbow a {transform: scale(1.1, 1.1);}
}
@media only screen and (max-width: 450px) {
	.rainbows.new .rainbow_body .rainbow a {transform: scale(1, 1);}
	.rainbows.new .rainbow_body {height: 990px;left: 0px;}
}
@media only screen and (max-width: 400px) {
	.rainbows.new .rainbow_body {left: -15px;}
}
@media only screen and (max-width: 380px) {
	.rainbows.new .rainbow_body .rainbow a {transform: scale(0.9, 0.9)!important;}
}
@media only screen and (max-width: 350px) {
	.rainbows.new .rainbow_body .rainbow a {transform: scale(0.8, 0.8)!important;}
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.rainbows article{
	max-width: 100%;
	margin-bottom:80px;
	width: 100%;
	padding:0px;
}
.rainbow_header {
    width: 620px;
    margin: 0 auto;
    margin-bottom: 25px;
}
.rainbow_header h2{
	text-align:center;
	font-size:60px;
	line-height:79px;
	font-family: "gt_walsheim_prolight";
	font-weight: 600;
	color:#55555A;
	padding-top:20px;
}
.rainbow_header p{
	text-align: center;
    font-size: 16px;
    line-height: 23px;
    font-family: "gt_walsheim_prolight";
    font-weight: 300;
    color:#55555A;
}


.rainbow div {
	overflow: hidden;
}
.rainbow div a{
    width: max-content;
    max-height:57px;
}
.rainbow div div {
	float:left;
	max-height:57px;
}
.rainbow div * {
	display: inline-block;
    vertical-align: middle;
}

.rainbow div img {
	vertical-align: middle;
	margin-right: 12px;
	margin-left: 12px;
	color:#fff;
	max-height:57px;
}
.rainbow div p {
	color:#FFFFFF;
	text-align: center;
    font-size: 44px;
    line-height: 57px;
    font-family: "gt_walsheim_prolight";
    font-weight: 600;
}
.rainbow div img.idots {
	margin-right:0;
}

#tecza {
	background: #F5CFFF;
}
#slonce {
	background: #FFF1B6;
}
#melon {
	background: #FFDBB1;
}
#truskawka {
	background: #FFAFBB;
}
#grejpfrut {
	background: #FF9A87;
}
#kwiat {
	background: #A7DAEA;
}
#goraca {
	background: #A8F0E0;
}
#ciemna {
	background: #C89AD3;
}
#wanilia {
	background: #FF8B9C;
}

@media only screen and (max-width: 800px) {
	.rainbow_header {
    	width: 90%;
	}
}
@media only screen and (max-width: 425px) {
	.rainbow_header h2{
    	font-size: 40px;
    	line-height: 50px;
	}
}