#howitworks{overflow: hidden; position:relative; height: 945px;}
#howitworks article{padding-top:1em; max-width: 100%; overflow: hidden; z-index: 2;}
#howitworks .kol1, #howitworks .kol2{width: 50%; display: inline-block; vertical-align: top;
position:absolute; height: 763px; }
#howitworks .kol1{right:50%;}
#howitworks .kol2{left:50%;}
#howitworks .kol1{
	background: #eb6fa9;
	background: -moz-linear-gradient(top,  #eb6fa9 0%, #fabc55 90%);
	background: -webkit-linear-gradient(top,  #eb6fa9 0%,#fabc55 90%);
	background: linear-gradient(to bottom,  #eb6fa9 0%,#fabc55 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb6fa9', endColorstr='#fabc55',GradientType=0 );
	text-align: right;
	overflow: hidden;
}
#howitworks .kol2{
	background: #028bc6;
	background: -moz-linear-gradient(top,  #028bc6 0%, #58c8e9 90%);
	background: -webkit-linear-gradient(top,  #028bc6 0%,#58c8e9 90%);
	background: linear-gradient(to bottom,  #028bc6 0%,#58c8e9 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#028bc6', endColorstr='#58c8e9',GradientType=0 );
	text-align: left;
	overflow: hidden;
}
#howitworks .kol1 div img, #howitworks .kol2 div img{margin:5.5em 0 3.5em; right:auto; bottom: auto;
left:auto; position: relative; z-index: 1}
#howitworks .kol1 img{right: 3em; bottom:4.5em; position: absolute; z-index: 1}
#howitworks .kol2 img{left: 3em; bottom: 6.5em; position: absolute; z-index: 1}
#howitworks .kol1 .stol{position:absolute; bottom: 0; right: 0; padding:0; z-index: 0;
background: url("../img/HELLOSLIM_WWW_1280_table_day.jpg") repeat-x; width: 100%; height:194px; margin:0;}
#howitworks .kol2 .stol{position:absolute; bottom: 0; left: 0; padding:0; margin:0; z-index: 0;
background: url("../img/HELLOSLIM_WWW_1280_table_night.jpg") repeat-x; width: 100%; height:194px; }
#howitworks .bt{background: #9e85d2; color:#fff; width: 70%; margin:2em auto;}
#howitworks .kol1 div, #howitworks .kol2 div{ width:80%; max-width:480px; text-align:center; position:relative; margin:0 auto; font-size:0.8em; }

#howitworks .kol1 div p, #howitworks .kol2 div p{color:#fff; font-size:1.8em; line-height:1.6em; }
#howitworks .kol1 .krok1{position:absolute; top:0; right:0%; margin-right:482px;}
#howitworks .kol2 .krok2{position:absolute; top:0; left:0%; margin-left:482px;}

#howitworks .kol1 .abox, #howitworks .kol2 .abox{width:100%; position: relative; margin:0;}
#howitworks .kol1 .element1{ z-index:10; bottom:8.3em; right:1em; max-width:185px; }
#howitworks .kol1 .element2{ z-index:8; bottom:9em; left:0; right:0; margin:0 auto; max-width:180px; /*bottom:11em; right: 450px;*/ }
#howitworks .kol1 .element3{ z-index:9; bottom:6em; right:17em;  max-width:165px; display:none; }
#howitworks .kol1 .element4{ z-index:9; bottom:10em; right:7em; max-width:200px; }
#howitworks .kol1 .element5{ z-index:11; bottom:5em; right:2em; max-width:165px; }

#howitworks .kol2 .element1{ z-index:10; bottom:9em; left:2em; display:none; max-width:165px; }
#howitworks .kol2 .element2{ z-index:8; bottom:11em; left:2.5em; display:none; max-width:190px; }
#howitworks .kol2 .element3{ z-index:9; bottom:5em; left:16em; display:none; max-width:225px; }
#howitworks .kol2 .element4{ z-index:10; bottom:7em; left:2em; transform:scale(-1,1); display:none; max-width:110px; }
#howitworks .kol2 .element5{ z-index:8; bottom:11em; left:6em; display:none; max-width:275px; }
#howitworks .kol2 .element6{ z-index:8; left:0; right:0; margin:0 auto; max-width:170px; }

/*animacja kroków*/
#howitworks.animate .kol1 .element1{animation: helloslimdzien 1s linear 1.2s 1 backwards;
-webkit-animation: helloslimdzien 1s linear 1.2s 1 backwards;
}
#howitworks.animate .kol1 .element2{animation: helloslimdzien 0.8s linear 1.2s 1 backwards;
-webkit-animation: helloslimdzien 0.8s linear 1.2s 1 backwards; }
#howitworks.animate .kol1 .element3{animation: helloslimdzien 0.6s linear 1.2s 1 backwards;
-webkit-animation: helloslimdzien 0.6s linear 1.2s 1 backwards;}
#howitworks.animate .kol1 .element4{animation: helloslimdzien 1s linear 1.2s 1 backwards;
-webkit-animation: helloslimdzien 1s linear 1.2s 1 backwards;}
#howitworks.animate .kol1 .element5{animation: helloslimdzien 1.2s linear 1.2s 1 backwards;
-webkit-animation: helloslimdzien 1.2s linear 1.2s 1 backwards;}

#howitworks.animate .kol2 .element1{animation: helloslimnoc 1.5s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 1.5s linear 1.2s 1 backwards; }
#howitworks.animate .kol2 .element2{animation: helloslimnoc 1.2s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 1.2s linear 1.2s 1 backwards;
}
#howitworks.animate .kol2 .element3{animation: helloslimnoc 1.4s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 1.4s linear 1.2s 1 backwards;}
#howitworks.animate .kol2 .element4{animation: helloslimnoc 1.6s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 1.6s linear 1.2s 1 backwards;}
#howitworks.animate .kol2 .element5{animation: helloslimnoc 2s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 2s linear 1.2s 1 backwards;}
#howitworks.animate .kol2 .element6{animation: helloslimnoc 1.2s linear 1.2s 1 backwards;
-webkit-animation: helloslimnoc 2s linear 1.2s 1 backwards;}

#howitworks.animate .kol1 .stol{animation: helloslimstol 1s linear 0s 1 backwards;
-webkit-animation: helloslimstol 1s linear 0s 1 backwards;}
#howitworks.animate .kol2 .stol{animation: helloslimstol 1s linear 0s 1 backwards;
-webkit-animation: helloslimstol 1s linear 0s 1 backwards;}
#howitworks.animate .kol2 .krok2,
#howitworks.animate .kol1 .krok1{animation: helloslimkrok 1s linear 0s 1 backwards;
-webkit-animation: helloslimkrok 1s linear 0s 1 backwards;}
#howitworks.animate .kol1 div.prawo,
#howitworks.animate .kol2 div.lewo{animation: helloslimtext 1s linear 0.8s 1 backwards;
-webkit-animation: helloslimtext 1s linear 0.8s 1 backwards;
}
#howitworks.animate .kol1 div.prawo .sloneczko,
#howitworks.animate .kol2 div.lewo .sloneczko{animation: helloslimzaslona 1s linear 0.8s 1 backwards;
-webkit-animation: helloslimsloneczko 1s linear 0.8s 1 backwards;
}
#howitworks.animate .kol1 div.prawo .zaslona,
#howitworks.animate .kol2 div.lewo .zaslona{position:relative;}

#howitworks.animate .kol1 div.prawo .zaslona span{
background: #eb6fa9;
	background: -moz-linear-gradient(top,  #EE8096 0%, #F19184 100%);
	background: -webkit-linear-gradient(top,  #EE8096 0%,#F19184 100%);
	background: linear-gradient(to bottom,  #EE8096 0%,#F19184 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EE8096', endColorstr='#F19184',GradientType=0 );
	position:absolute; top:0; right:0;
width: 100%;  animation: helloslimzaslona 1s linear 0.8s 1 backwards;
-webkit-animation: helloslimzaslona 1s linear 0.8s 1 backwards;}

#howitworks.animate .kol2 div.lewo .zaslona span{
background: #028bc6;
	background: -moz-linear-gradient(top,  #1599CE 0%, #27A6D5 100%);
	background: -webkit-linear-gradient(top,  #1599CE 0%,#27A6D5 100%);
	background: linear-gradient(to bottom,  #1599CE 0%,#27A6D5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1599CE', endColorstr='#27A6D5',GradientType=0 );
	position:absolute; top:0; right:0; 
width: 100%;  animation: helloslimzaslona 1s linear 0.8s 1 backwards;
-webkit-animation: helloslimzaslona 1s linear 0.8s 1 backwards;}


@keyframes helloslimdzien {
  0% {right:-100%; display:none;}
  100% {display:block;}
}
@-webkit-keyframes helloslimdzien {
  0% {right:-100%; display:none;}
  100% {display:block;}
}

@keyframes helloslimnoc {
  0% {left:-100%; display:none;}
  100% {display:block;}
}
@-webkit-keyframes helloslimnoc {
  0% {left:-100%; display:none;}
  100% {display:block;}
}

@keyframes helloslimstol {
  0% {bottom:-50%; display:none;}
  100% {}
}
@-webkit-keyframes helloslimstol {
  0% {bottom:-50%; display:none;}
  100% {}
}

@keyframes helloslimkrok{
  0% {top:-50%; display:none;}
  100% {}
}
@-webkit-keyframes helloslimkrok{
  0% {top:-50%; display:none;}
  100% {}
}

@keyframes helloslimtext{
  0% {opacity:0; display:none;}
  100% {opacity:1; display:block;}
}
@-webkit-keyframes helloslimtext{
  0% {opacity:0; display:none;}
  100% {opacity:1; display:block;}
}

@keyframes helloslimsloneczko{
   0% {opacity:0; display:none; transform:scale(0);}
  100% {opacity:1; display:block; transform:scale(1);}
}
@-webkit-keyframes helloslimsloneczko{
  0% {opacity:0; display:none; transform:scale(0);}
  100% {opacity:1; display:block; transform:scale(1);}
}

@keyframes helloslimzaslona{
   0% {height:100% }
  100% {height:0;}
}
@-webkit-keyframes helloslimzaslona{
 0% {height:100% }
  100% {height:0;}
}


/*animacja skladniki dzien*/
#howitworks .kol1.noanimate .element1{animation: helloslimdzienskladniki 1s linear 0s 1 forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1 forwards;
}
#howitworks .kol1.noanimate .element2{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards; }
#howitworks .kol1.noanimate .element3{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol1.noanimate .element4{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
}
#howitworks .kol1.noanimate .element5{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol1.noanimate .stol{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol1.noanimate .krok1{animation: helloslimdzienskladnikikrok 1s linear 0.5s 1  forwards;
-webkit-animation: helloslimdzienskladnikikrok 1s linear 0.5s 1  forwards;}
#howitworks .kol1.noanimate div.prawo{animation: helloslimdzienskladnikitxt 1s linear 0.4s 1  forwards;
-webkit-animation: helloslimdzienskladnikitxt 1s linear 0.4s 1  forwards;
}
#howitworks .kol1.noanimate {animation: helloslimdzienskladnipojemnik 1s ease 1.2s 1  forwards;
-webkit-animation: helloslimdzienskladnipojemnik 1s ease 1.2s 1  forwards;}
#howitworks .kol2.animate2 {animation: helloslimdzienskladnikol2 1.2s ease 1.2s 1  forwards;
-webkit-animation: helloslimdzienskladnikol2 1.2s ease 1.2s 1  forwards;}
#slider_day.noanimate {animation: helloslimdzienslider 1s linear 1.4s 1  forwards;
-webkit-animation: helloslimdzienslider 1s linear 1.4s 1  forwards;
}

/*wspolna czaesc dla skladnikow*/
@keyframes helloslimdzienskladniki{
  0% {}
  100% {bottom:-100%}
}
@-webkit-keyframes helloslimdzienskladniki{
  0% {}
  100% {bottom:-100%}
}

@keyframes helloslimdzienskladnikitxt{
  0% {}
  50%{padding-top:20%; opacity:0}
  100% {bottom:-100%; opacity:0}
}
@-webkit-keyframes helloslimdzienskladnikitxt{
  0% {}
  50%{padding-top:20%; opacity:0}
  100% {bottom:-100%; opacity:0}
}

@keyframes helloslimdzienskladnikikrok{
  0% {}
  50%{top:-20%; opacity:0}
  100% {top:-100%; opacity:0}
}
@-webkit-keyframes helloslimdzienskladnikikrok{
  0% {}
  50%{top:-20%; opacity:0}
  100% {top:-100%; opacity:0}
}
/*koniec wspolnej czesci dla skladnikow*/
@keyframes helloslimdzienskladnipojemnik{
  0% {}
  100% {width:100%; right:0}
}
@-webkit-keyframes helloslimdzienskladnipojemnik{
  0% {}
  100% {width:100%; right:0}
}
@keyframes helloslimdzienskladnikol2{
  0% { }
  100% {left:100%; }
}
@-webkit-keyframes helloslimdzienskladnikol2{
  0% { }
  100% {left:100%; }
}
@keyframes helloslimdzienslider{
  0% {opacity:0;}
  100% {opacity:1; z-index:2}
}
@-webkit-keyframes helloslimdzienslider{
  0% {opacity:0;}
  100% {opacity:1; z-index:2}
}

/*animacja skladniki noc*/
#howitworks .kol2.noanimate .element1{animation: helloslimdzienskladniki 1s linear 0s 1 forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1 forwards;
}
#howitworks .kol2.noanimate .element2{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;  }
#howitworks .kol2.noanimate .element3{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;  }
#howitworks .kol2.noanimate .element4{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol2.noanimate .element5{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol2.noanimate .element6{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol2.noanimate .stol{animation: helloslimdzienskladniki 1s linear 0s 1  forwards;
-webkit-animation: helloslimdzienskladniki 1s linear 0s 1  forwards;}
#howitworks .kol2.noanimate .krok2{animation: helloslimdzienskladnikikrok 1s linear 0.5s 1  forwards;
-webkit-animation: helloslimdzienskladnikikrok 1s linear 0.5s 1  forwards;}
#howitworks .kol2.noanimate div.lewo{animation: helloslimdzienskladnikitxt 1s linear 0.4s 1  forwards;
-webkit-animation: helloslimdzienskladnikitxt 1s linear 0.4s 1  forwards;}

#howitworks .kol2.noanimate {animation: helloslimnocskladnipojemnik 1s ease 1.2s 1  forwards;
-webkit-animation: helloslimnocskladnipojemnik 1s ease 1.2s 1  forwards;}
#howitworks .kol1.animate2 {animation: helloslimnocskladnikol1 1.2s ease 1.2s 1  forwards;
-webkit-animation: helloslimnocskladnikol1 1.2s ease 1.2s 1  forwards; }
#slider_night.noanimate {animation: helloslimnocslider 1s linear 1.4s 1  forwards;
-webkit-animation: helloslimnocslider 1s linear 1.4s 1  forwards;}

@keyframes helloslimnocskladnipojemnik{
  0% {}
  100% {width:100%; left:0}
}
@-webkit-keyframes helloslimnocskladnipojemnik{
  0% {}
  100% {width:100%; left:0}
}
@keyframes helloslimnocskladnikol1{
  0% {}
  100% {right:100%; width:0%}
}
@-webkit-keyframes helloslimnocskladnikol1{
  0% {}
  100% {right:100%; width:0%}
}
@keyframes helloslimnocslider{
  0% {opacity:0;}
  100% {opacity:1; z-index:2}
}
@-webkit-keyframes helloslimnocslider{
  0% {opacity:0;}
  100% {opacity:1; z-index:2}
}

#slider_day{background: #eb6fa9;
	background: -moz-linear-gradient(top,  #eb6fa9 0%, #fabc55 90%);
	background: -webkit-linear-gradient(top,  #eb6fa9 0%,#fabc55 90%);
	background: linear-gradient(to bottom,  #eb6fa9 0%,#fabc55 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb6fa9', endColorstr='#fabc55',GradientType=0 );
	text-align: center;
	overflow: hidden;}
#slider_night{
	background: #028bc6;
	background: -moz-linear-gradient(top,  #028bc6 0%, #58c8e9 90%);
	background: -webkit-linear-gradient(top,  #028bc6 0%,#58c8e9 90%);
	background: linear-gradient(to bottom,  #028bc6 0%,#58c8e9 90%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#028bc6', endColorstr='#58c8e9',GradientType=0 );
	text-align: center;
	overflow: hidden;
}
#slider_day,#slider_night{color:#fff; font-size: 1.4em; padding: 0em; padding-top:0 !important; position:relative;
 bottom: 0; height:763px;}
#slider_day h2, #slider_night h2{color:#fff; margin:0; font-size: 3.2em; margin: 0.6em 0 0.7em 0;}
#slider_day .kol3, #slider_night .kol3{width: 33%; text-align: center; display: inline-block;
vertical-align: top; color:#fff;  }
#slider_day .kol3 img, #slider_night .kol3 img{margin-bottom: 1em;}
#slider_day .kol3 p, #slider_night .kol3 p{font-size:1.48em; width: 90%; margin:auto;}
#slider_day #day_nfo, #slider_night #night_nfo {font-size:1.28em;margin:auto;}
#slider_day h3, #slider_night h3{color:#fff; font-size: 1.6em; margin:0.6em 0 0em 0;}
#slider_day .day-gallery, #slider_night .night-gallery{width: 100%;  margin:0 auto 3em; }
#slider_day .day-gallery .gallery-cell, #slider_night .night-gallery .gallery-cell{ width: 100%; overflow: hidden;}
#slider_day p strong, #slider_night p strong{padding-top:1em;}
#slider_day .flickity-page-dots, #slider_night .flickity-page-dots{bottom: -12.8em;}
#slider_day .flickity-page-dots .dot, #slider_night .flickity-page-dots .dot { width: 12px; height: 12px; margin:0 15px;}
#slider_day .flickity-page-dots .dot.is-selected, #slider_night .flickity-page-dots .dot.is-selected{background: #fff; }
#slider_day #close, #slider_night #close{position:absolute; cursor:pointer; top:0; left:50%; margin-left:580px; font-size: 2em; font-weight: bold;}

@media screen and (max-width: 450px) {
	.section-after .txt {padding: 0 10px;}
}

@media screen and (max-width: 384px) {
	#howitworks .kol1 .element2 {bottom: 5em;}
	#howitworks .kol2 img {bottom: 4.5em;}
	#customer-satisfaction-before h2 {font-size: 2.4em;}
}

@media screen and (max-width: 767px) {
	.list-percent {margin: 0 auto;}
}

@media screen and (min-width: 768px)
{
    #howitworks .kol1 .element2{ left:auto; right:16em; }

    #howitworks .kol2 .element6{ bottom:9em; left:17em; right:auto; max-width:150px; }

}

@media screen and (min-width: 1024px)
{
    #howitworks .kol1 .element1{ max-width:222px; right:2em; }
    #howitworks .kol1 .element2{ max-width:225px; right:22em; }
    #howitworks .kol1 .element3{ max-width:255px; right:21em; }
    #howitworks .kol1 .element4{ max-width:275px; right:8em; }
    #howitworks .kol1 .element5{ max-width:225px; right:4em; }

    #howitworks .kol2 .element1{ max-width:206px; left:6em; }
    #howitworks .kol2 .element2{ max-width:260px; left:4em; }
    #howitworks .kol2 .element3{ max-width:300px; left:23em; }
    #howitworks .kol2 .element4{ max-width:130px; left:6em; }
    #howitworks .kol2 .element5{ max-width:363px; left:11em; }
    #howitworks .kol2 .element6{ max-width:185px; left:24em; }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	nav ul.menu li a {font-size: 1.3em;}
}

@media screen and (min-width: 1280px)
{

    #howitworks .kol1 .element2{ max-width:239px; right:32em; }
    #howitworks .kol1 .element3{ max-width:255px; right:28em; }
    #howitworks .kol1 .element4{ max-width:300px; right:8em; }

    #howitworks .kol2 .element6{ max-width:196px; left:34em; }
}