/*  RESET meyerweb */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* RESET end */

/* FONTS */
@font-face {
    font-family: 'interstatepllight';
    src: url('../fonts/interstatepllight.eot');
    src: url('../fonts/interstatepllight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/interstatepllight.woff') format('woff'),
    url('../fonts/interstatepllight.ttf') format('truetype'),
    url('../fonts/interstatepllight.svg#interstatepllight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'interstatepl';
    src: url('../fonts/interstatepl.eot');
    src: url('../fonts/interstatepl.eot?#iefix') format('embedded-opentype'),
    url('../fonts/interstatepl.woff') format('woff'),
    url('../fonts/interstatepl.ttf') format('truetype'),
    url('../fonts/interstatepl.svg#interstatepl') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'interstateplbold';
	src: url('../fonts/interstateplbold.eot');
	src: url('../fonts/interstateplbold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/interstateplbold.woff') format('woff'),
	url('../fonts/interstateplbold.ttf') format('truetype'),
	url('../fonts/interstateplbold.svg#interstateplbold') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FONTS end */


/* -----  FULLPAGE SLIDER  ----- */

#fp-nav ul li {
	margin: 20px 8px;
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
	width: 18px;
	height: 18px;
	margin: -6px 0 0 -10px;
	border: 0;
	background-color: #fff;
	border: 2px solid transparent;
}

#fp-nav ul li:hover a span {
	width: 18px;
	height: 18px;
	margin: -6px 0 0 -10px;
}

#fp-nav ul li a span {
	width: 10px;
	height: 10px;
	margin: -2px 0 0 -6px;

	background-color: transparent;
	border: 2px solid #00baef;
}

.fp-slidesNav.bottom{
	bottom: 16%;
}

/* right bullet nav colors */

.fp-viewing-1 #fp-nav ul li a span, 
.fp-viewing-3 #fp-nav ul li a span {
	border-color: #013561;
}

.fp-viewing-1  #fp-nav ul li a.active span,
.fp-viewing-3  #fp-nav ul li a.active span {
	background-color: #013561;
}

.fp-viewing-2-0  #fp-nav ul li a.active span,
.fp-viewing-2-1  #fp-nav ul li a.active span,
.fp-viewing-2-2  #fp-nav ul li a.active span,
.fp-viewing-4  #fp-nav ul li a.active span {
	background-color: #00baef;
}

.fp-viewing-0 #fp-nav ul li a span,
.fp-viewing-5 #fp-nav ul li a span {
	border-color: #fff;
}

.fp-viewing-0  #fp-nav ul li a.active span.
.fp-viewing-5  #fp-nav ul li a.active span {
	background-color: #fff;
}

.fp-controlArrow.fp-prev {
	background: url("../img/layout/arrow-left-blue.png") no-repeat;
	background-position: center left;	
	margin-left: -5%;			
}

.fp-controlArrow.fp-next {
	background: url("../img/layout/arrow-right-blue.png") no-repeat;
	background-position: center right;	
	margin-right: -5%;		
}

.section .fp-controlArrow {
	background-size: contain;	
	width: 7%;
	height: 7%;
	border: 0;
}

html {
	background: #000;
	font-family: interstatepllight,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body {
	font-size: 100%;	
	color: #000;
}

.hide {
	display: none;
}

.show {
	display: block !important;
}

.preloader {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
	background: #000; 
}

/* IE lt9 video fix */

.fullscreen-bg {
	background-image: url("../img/bg/bg-photo1.jpg"); 
}


/* -----  CONTENT  ----- */

.header {

	height: 88px;
	position: relative;
	top: 0;

	background: #0067b4; /* Old browsers */
	background: url("../img/layout/header-bg.png") repeat-x;
	background: -moz-linear-gradient(top,  #00bdf2 0%, #00b3f0 20%, #0067b4 75%, #004786 100%, #034985 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00bdf2), color-stop(20%,#00b3f0), color-stop(75%,#0067b4), color-stop(100%,#004786), color-stop(100%,#034985)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bdf2', endColorstr='#034985',GradientType=0 ); /* IE6-9 */

}

.footer-wrapper {
	position: static;
	bottom: 0;
	width: 100%;
}

.footer {
	height: 88px;
	position: relative;
	bottom: 0;

	background: #0067b4; /* Old browsers */
	background: url("../img/layout/header-bg.png") repeat-x;
	background: -moz-linear-gradient(top,  #00bdf2 0%, #00b3f0 20%, #0067b4 75%, #004786 100%, #034985 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00bdf2), color-stop(20%,#00b3f0), color-stop(75%,#0067b4), color-stop(100%,#004786), color-stop(100%,#034985)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00bdf2 0%,#00b3f0 20%,#0067b4 75%,#004786 100%,#034985 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bdf2', endColorstr='#034985',GradientType=0 ); /* IE6-9 */	
}

.footer-text {
	background: #fff;
	padding: 8px 30px;
	font-size: 0.7em;
}

.citi-logo {
	position: absolute;
	top: 20px;
	left: 30px;
}

.header-lang{
	position: absolute;
	color: #fff;
	right: 30px;
	top: 35px;
    font-size: 1.2em;	
}

.header-lang a{
	color: #fff;
	text-decoration: none;
	padding: 0 5px;
}

.header-lang a:hover{
	font-weight: bold;
}

.header-lang .active{
	font-weight: bold;
}


/* -----  WRAPPER  ----- */

.wrapper {
	width: 100%;
	height: 100%;
}

	/*  FULLPAGE SLIDER - ELEMENTS */

.section-content {
    height: 100%;
    width: 100%;
    position: relative;    
    background-size: cover;
    background-position: center top;    
}

 #section1-content {
  */*  background-image: url("../img/bg/bg-photo1.jpg");  */
}

 #section2-content,
 #section4-content {
    background-image: url("../img/bg/bg-1.jpg");
}


 #section3-content,
 #section5-content {
    background-image: url("../img/bg/bg-2.jpg");
}

 #section6-content {
    background-image: url("../img/bg/bg-photo6.jpg");
    padding-top: 1px;
}


.section-heading h2 {
	font-size: 2.6em;
	text-align: center;
	padding: 20px 0;
	font-weight: bold;
}

.section6 .section-heading {
	text-shadow: 1px 1px 8px #000;
	position: absolute;
	right: 2%;
    width: 55%;
}

.section2 h2,
.section4 h2 {
	color: #013561;
}

.section3 h2,
.section5 h2 {
	color: #00baef;
}

.section6 h2 {
	color: #fff;
}
.section6 h3 {
	text-align: center;
	color: #fff;
	font-size: 2em;
}


/* SECTION 1 */

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg-video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg-video {
    width: 300%;
    left: -100%;
  }
}


.fullscreen-bg-video-overlay {
	background-image: url("../img/layout/bg-video-overlay.png");
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	will-change: transform;
}


.main-headline {
	top: 5%;
}

.main-headline img {
	width: 80%;
	padding-top: 0;
	margin: 0 auto;
	display: block;
	max-width: 1600px;
	z-index: 9999;
}

.mobile-headline {
	font-size: 4em;
	line-height: 1.5em;
	font-weight: bold;
	color: #fff;
	margin: 0 auto;
	text-align: center;
	text-shadow: 3px 3px 10px #000;
	margin: 20% auto 0;
}

.store-wrapper {
	width: 16%;
	left: 50%;
	margin-left: -8%;
	position: absolute;
	bottom: 10%;
}

.store-link img {
	width: 45%;
	will-change: transform;
}

.store-link-google {
	margin-right: 5%;
}

.down-arrow-wrapper {
	width: 16%;
	left: 50%;
	margin-left: -8%;
	position: absolute;
	bottom: 1%;
}

.up-arrow-wrapper {
	width: 16%;
	position: absolute;
    right: 0;
    bottom: 35%;
}


.down-arrow img,
.up-arrow img {
	display: block;
	width: 18%;
	max-width: 88px;
	max-height: 53px;
	margin: 15px auto 0;
	will-change: transform;	
}



/* SECTION 2 */

.columns-wrapper {
	width: 90%;
	height: 75%;
	margin: 0 auto;
}

.store-wrapper.position-2 {
	left: 13%;
	bottom: 5%;
}

.columns-wrapper .column-element {
	float: left;
}

.columns-wrapper .column-1,
.columns-wrapper .column-3 {
	width: 35%;
	height: 100%;	
	position: relative;
}

.columns-wrapper .column-2 {
	width: 30%;
	height: 100%;
	position: relative;	
}

.icon-wrapper {
	width: 16%;
	height: 74%;
	float: left;
	padding-top: 5%;	
}
.column-3 .icon-wrapper {
	float: right;
}

.icon-wrapper img {
	width: 70%;
	max-width: 60px;
	display: block;
	margin: 0 auto;
}

.info-wrapper {
	width: 84%;
	float: left;
	cursor: pointer;
}

.info-wrapper h3 {
	color: #013561;
	font-size: 1.4em;
	margin-bottom: 0.5em;
}

.info-wrapper.active h3,
.info-wrapper:hover h3 {
	font-weight: bold;
}

.info-wrapper p {
    font-size: 1em;
    line-height: 1.3em;	
}

.box-element {
	height: 28%;
}

.box-separator {
	width: 84%;
	height: 8%;
	margin-left: 16%;
}

.box-separator.align-left {
	margin: 0 16% 0 0;
}

.box-separator img {
	display: block;
	margin: 0 auto;
	padding-top: 1%;
	max-width: 316px;
    width: 70%;
}

.main-headline {
 	top: 0;
 }
.main-headline,
.column-2 {
	height: 100%;
	text-align: center;
	font-size: 0;
	line-height: 0;
}
.main-headline:before,
.column-2:before {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	content: "";
}
.desktop-headline {
	 margin-top: -200px;
}

.desktop-headline,
.phone-wrapper {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	line-height: 0;
}




.explanations-wrapper .phone-wrapper {
	display: block;
}

.phone-wrapper {
	position: relative;
	background: url("../img/layout/phone-frame.png") no-repeat;
	background-size: cover;
	width: 393px;
	height: 705px;
	margin: 0 auto;	
	background-position: left top;
}

.phone-screen {
	position: absolute;
    left: 51px;
    top: 90px;
    width: 288px;
    height: 505px;
    background-size: cover;
    transition: background 0.5s ease;
    will-change: transform;
}

/* lang pl */
.lang-pl #touchID {
	background-image: url("../img/pl/screen/touchID.jpg");
}

.lang-pl #snapshot {
	background-image: url("../img/pl/screen/snapshot.jpg");
}

.lang-pl #connection {
	background-image: url("../img/pl/screen/connection.jpg");
}

.lang-pl #activation {
	background-image: url("../img/pl/screen/activation.jpg");
}

.lang-pl #transfer {
	background-image: url("../img/pl/screen/transfer.jpg");
}

.lang-pl #management {
	background-image: url("../img/pl/screen/push.jpg");
}


/* lang en */
.lang-en #touchID {
	background-image: url("../img/en/screen/touchID.jpg");
}

.lang-en #snapshot {
	background-image: url("../img/en/screen/snapshot.jpg");
}

.lang-en #connection {
	background-image: url("../img/en/screen/connection.jpg");
}

.lang-en #activation {
	background-image: url("../img/en/screen/activation.jpg");
}

.lang-en #transfer {
	background-image: url("../img/en/screen/transfer.jpg");
}

.lang-en #management {
	background-image: url("../img/en/screen/push.jpg");
}



.button-demo-wrapper {
	width: 30%;
	margin: 0 auto;
    bottom: 7%;
    right: 50%;
    margin-right: -15%;	
    position: absolute;
    will-change: transform;
}

.button-demo {
	z-index: 5;
	width: 80%;
	height: 50px;
	display: block;
	text-decoration: none;
	line-height: 50px;
    font-size: 0.9em;
    letter-spacing: 0.5px;
	color: #fff;
	text-align: center;
	background-color: #ffa202;
	
	position: absolute;
    bottom: 1%;
    left: 50%;
    margin-left: -40%;

		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;

		background: rgba(255,162,2,1);
		background: -moz-linear-gradient(top, rgba(255,162,2,1) 0%, rgba(255,133,1,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,162,2,1)), color-stop(100%, rgba(255,133,1,1)));
		background: -webkit-linear-gradient(top, rgba(255,162,2,1) 0%, rgba(255,133,1,1) 100%);
		background: -o-linear-gradient(top, rgba(255,162,2,1) 0%, rgba(255,133,1,1) 100%);
		background: -ms-linear-gradient(top, rgba(255,162,2,1) 0%, rgba(255,133,1,1) 100%);
		background: linear-gradient(to bottom, rgba(255,162,2,1) 0%, rgba(255,133,1,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa202', endColorstr='#ff8501', GradientType=0 );
}

.button-demo:hover {
	background: #ffa202;
}




/* SECTION 3 */

.explanations-wrapper {
	width: 1300px;
    margin: 0 auto;
 	position: absolute;
 	left: 50%;
 	top: 50%;
	margin-top: -400px;
   	margin-left: -650px; 	
}

.slide {
    position: relative;	
}

/* lang pl */
.lang-pl #howitworks {
	background-image: url("../img/pl/screen/howitworks.jpg");
}

.lang-pl #login {
	background-image: url("../img/pl/screen/login.jpg");
}

/* lang en */
.lang-en #howitworks {
	background-image: url("../img/en/screen/howitworks.jpg");
}

.lang-en #login {
	background-image: url("../img/en/screen/login.jpg");
}



.explanation-element {
	position: absolute;
	z-index: 5;
}

.explanation-element p {
	font-size: 1.2em;
	line-height: 1.2em;
}

.explanation-element h3 {
	font-size: 1.6em;
	margin-bottom: 0.3em;
	color: #00baef;
	font-weight: bold;
}


.arrow-element {
	z-index: 3;
	position: absolute;
	background-size: contain;
	will-change: transform;
}


.explanation-login {
    top: 120px;
    left: 30px;
    width: 324px;
    z-index: 5;
}

.explanation-login-arrow {
	background-image: url("../img/arrows/login-arrow.png");
	width: 566px;
	height: 132px;
    left: 15px;
    top: 135px;
}

.lang-pl .explanation-pass {
    top: 430px;
    left: 33px;
	width: 400px;
}

.lang-pl .explanation-pass-arrow {
	background-image: url("../img/arrows/pass-arrow.png");
	width: 536px;
	height: 127px;
	left: 15px;
    top: 453px;
}

.lang-en .explanation-pass {
	top: 510px;
    left: 880px;
    width: 385px;
}

.lang-en .explanation-pass-arrow {
	background-image: url("../img/arrows/pass-arrow.png");
	width: 536px;
	height: 127px;
	left: 15px;
    top: 442px;
}

.lang-pl .explanation-register {
	top: 475px;
    left: 880px;
    width: 385px;
}

.lang-pl .explanation-register-arrow {
	background-image: url("../img/arrows/register-arrow.png");
	width: 621px;
	height: 181px;
    left: 670px;
    top: 450px;
}

.lang-en .explanation-register {
    top: 430px;
    left: 33px;
	width: 400px;
}

.lang-en .explanation-register-arrow {
	background-image: url("../img/arrows/register-arrow.png");
	width: 621px;
	height: 181px;
    left: 670px;
    top: 462px;
}

.explanation-lang {
    top: 105px;
    left: 905px;
    width: 320px;
}

.explanation-lang-arrow {
	background-image: url("../img/arrows/lang-arrow.png");
	width: 577px;
	height: 85px;
    left: 660px;
    top: 115px;
}


	/* SLIDE 2 */

.explanation-fotokasa {
    top: 173px;
    left: 20px;
    width: 385px;
}

.explanation-fotokasa-arrow {
	background-image: url("../img/arrows/fotokasa-arrow.png");
	width: 694px;
	height: 247px;
    left: 13px;
    top: 155px;
}

.explanation-settings {
    top: 40px;
    left: 865px;
    width: 400px;
}

.explanation-settings-arrow {
	background-image: url("../img/arrows/settings-arrow.png");
	width: 705px;
	height: 144px;
    left: 560px;
    top: 60px;
}

.explanation-rebate {
    top: 505px;
    left: 875px;
    width: 410px;
}

.explanation-rebate-arrow {
	background-image: url("../img/arrows/rebate-arrow.png");
	width: 650px;
	height: 138px;
    left: 620px;
    top: 515px;
}


	/* SLIDE 3 */


.explanation-accounts {
	top: 210px;
    left: 45px;
    width: 385px;
}

.explanation-accounts-arrow {
	background-image: url("../img/arrows/accounts-arrow.png");
	width: 563px;
	height: 275px;
    left: 10px;
    top: 175px;
}

.explanation-deposits {
    top: 68px;
    left: 875px;
    width: 400px;
}

.explanation-deposits-arrow {
	background-image: url("../img/arrows/deposits-arrow.png");
	width: 640px;
	height: 160px;
    left: 650px;
    top: 65px;
}

.explanation-comfort {
    top: 515px;
    left: 880px;
    width: 385px;
}

.explanation-comfort-arrow {
	background-image: url("../img/arrows/comfort-arrow.png");
	width: 664px;
	height: 285px;
    left: 600px;
    top: 397px;
}



/* SECTION 4 */

.video-wrapper {
    margin: 2% auto 0 auto;
    width: 60%;
}


/* SECTION 5 */

.faq-wrapper {
	width: 70%;
	height: 80%;
	margin: 0 auto;
	padding-top: 3%;
	position: relative;
}

.questions-categories-wrapper {
	top: 50px;
	width: 45%;
	float: left;
	margin-bottom: 5%;
}

.questions-wrapper {
	width: 50%;
	float: right;
}

.questions-categories li,
.questions li {
	font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
	line-height: 1.8em;
	cursor: pointer; 
}

.questions-categories .active,
.questions-subcategories .questions .active,
.questions-categories li:hover,
.questions-subcategories .questions li:hover {
	color: #00baef;
}

.questions-categories .current-answer {
	color: #555;
	margin: 20px 0;
	border: 1px solid #ccc;
	line-height: 1.6em;
	width: 92%;
	padding: 3%;
	text-transform: none;
}

.questions-categories li:after,
.questions li:after {
	content: ">";
	float: right; 
	font-size: 1.5em;
	color: #00baef;
	padding-left: 5px;
}



.questions-categories .active:after,
.questions .active:after {
	content: "-";
}

.questions {
	display: none;
}

.answers-wrapper {
	width: 100%;
	height: 40%;
	float: left;
}

.answer-header {
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;	
    color: #00baef;
    padding-bottom: 10px;
    padding-left: 10px;
}

.answer-text {
	line-height: 1.3em;
	font-size: 1.1em;
	border: 1px solid #00baef;
	padding: 10px;
}

.answer-text a,
.current-answer a,
.explanation-element a{
	color: #00baef;
}


/* SECTION 6 */

.store-wrapper.position-3{
	bottom: 26%;
}





/* ------------------------------   RWD   ----------------------------------- */


/* --- LESS THAN 1400px --- */

@media only screen and (max-width: 1500px), screen and (max-height: 850px) {

	.phone-wrapper {
		width: 275px;
		height: 494px;
	}
	.phone-screen {
	    width: 201px;
	    height: 354px;
	    left: 36px;
	    top: 63px;
	}

	.section-heading h2 {
		font-size: 2.1em;
	}

	.section6 .section-heading h2 {
		font-size: 1.6em;
	}

	.section6 .section-heading h3 {
		font-size: 1.7em;
	}

	.explanations-wrapper {
		width: 1000px;
	    margin-top: -280px;
	    margin-left: -500px;
	}

	.section .fp-controlArrow {
		margin-left: 0;
		margin-right: 0;
	}

	.explanation-element h3 {
		font-size: 1.2em;
	}

	.explanation-element p {
		font-size: 0.9em;
	}

	/* SLIDE 1 */

	.explanation-login {
	    top: 83px;
	    left: 55px;
	    width: 235px;
	}

	.explanation-login-arrow {
	    width: 394px;
	    height: 92px;
	    left: 50px;
	    top: 95px;
	}

	.lang-pl .explanation-pass {
	    top: 295px;
	    left: 90px;
	    width: 280px;
	}

	.lang-pl .explanation-pass-arrow {
		width: 375px;
	    height: 89px;
	    left: 80px;
	    top: 311px;
	}

	.lang-en .explanation-pass {
		top: 340px;
	    left: 662px;
	    width: 265px;    
	}

	.lang-en .explanation-pass-arrow {
		width: 375px;
	    height: 89px;
	    left: 80px;
	    top: 311px;
	}

	.lang-pl .explanation-register {
	    top: 314px;
	    left: 662px;
	    width: 265px;
	}

	.lang-pl .explanation-register-arrow {
		width: 435px;
	    height: 127px;
	    left: 512px;
	    top: 309px;
	}	

	.lang-en .explanation-register {
	    top: 295px;
	    left: 90px;
	    width: 280px;
	}

	.lang-en .explanation-register-arrow {
		width: 435px;
	    height: 127px;
	    left: 512px;
	    top: 322px;
	}	

	.explanation-lang {
	    top: 58px;
	    left: 675px;
	    width: 240px;
	}

	.explanation-lang-arrow {
	    width: 404px;
	    height: 60px;
	    left: 500px;
	    top: 73px;
	}


		/* SLIDE 2 */

	.explanation-fotokasa {
		top: 91px;
	    left: 65px;
	    width: 255px;
	}

	.explanation-fotokasa-arrow {
	    width: 486px;
	    height: 173px;
	    left: 55px;
	    top: 105px;
	}

	.explanation-settings {
	    top: 20px;
	    left: 655px;
	    width: 290px;
	}

	.explanation-settings-arrow {
	    width: 494px;
	    height: 101px;
	    left: 440px;
	    top: 43px;
	}

	.explanation-rebate {
	    top: 352px;
	    left: 652px;
	    width: 305px;
	}

	.explanation-rebate-arrow {
	    width: 455px;
	    height: 97px;
	    left: 475px;
	    top: 363px;
	}


		/* SLIDE 3 */


	.explanation-accounts {
	    top: 133px;
	    left: 55px;
	    width: 295px;
	}

	.explanation-accounts-arrow {
	    width: 394px;
	    height: 193px;
	    left: 50px;
	    top: 123px;
	}

	.explanation-deposits {
	    top: 43px;
	    left: 665px;
	    width: 320px;
	}

	.explanation-deposits-arrow {
	    width: 448px;
	    height: 112px;
	    left: 505px;
	    top: 43px;
	}


	.explanation-comfort {
		top: 353px;
	    left: 658px;
	    width: 270px;
	}

	.explanation-comfort-arrow {
	    width: 465px;
	    height: 200px;
	    left: 460px;
	    top: 278px;
	}

	/* section 5*/

	.questions-categories li,
	.questions li {
		font-size: 0.8em;
	}

	.info-wrapper {
		width: 80%;
	}

	.info-wrapper h3 {
		font-size: 1.2em;
	}

	.info-wrapper p {
		font-size: 0.9em;
	}

	.answer-text {
		font-size: 0.9em;
	}

	.store-wrapper {
		width: 18%;
		margin-left: -9%;
		bottom: 8%;
	}	


}   






/* --- LESS THAN 1100px --- */


@media only screen and (max-width: 1100px), screen and (max-height: 650px) {

	body {
		font-size: 90%;	
	}	

	.phone-wrapper {
		width: 197px;
		height: 353px;
	}
	.phone-screen {
		width: 145px;
	    height: 258px;
	    left: 25px;
	    top: 42px;
	}

	.desktop-headline {
		padding-top: 4%;
	}

	.fp-controlArrow.fp-prev {
		background-position-x: right;
	}

	.fp-controlArrow.fp-next {
		background-position-x: left;
	}	

	/* SLIDE 1 */

	.explanation-login {
	    top: 30px;
	    left: 142px;
	    width: 170px;
	}

	.explanation-login-arrow {
		width: 283px;
	    height: 66px;
	    left: 140px;
	    top: 67px;
	}

	.lang-pl .explanation-pass {
	    top: 195px;
	    left: 156px;
	    width: 207px;
	}

	.lang-pl .explanation-pass-arrow {
		width: 272px;
	    height: 65px;
	    left: 152px;
	    top: 223px;
	}

	.lang-en .explanation-pass {
		top: 215px;
	    left: 568px;
	    width: 190px;		
	}

	.lang-en .explanation-pass-arrow {
		width: 272px;
	    height: 65px;
	    left: 152px;
	    top: 223px;
	}	

	.lang-pl .explanation-register {
		top: 191px;
	    left: 568px;
	    width: 190px;
	}

	.lang-pl .explanation-register-arrow {
	    width: 311px;
	    height: 91px;
	    left: 460px;
	    top: 220px;
	}

	.lang-en .explanation-register {
	    top: 195px;
	    left: 156px;
	    width: 207px;
	}

	.lang-en .explanation-register-arrow {
	    width: 311px;
	    height: 91px;
	    left: 460px;
	    top: 230px;
	}	

	.explanation-lang {
		top: 30px;
	    left: 575px;
	    width: 185px;
	}

	.explanation-lang-arrow {
	    width: 289px;
	    height: 43px;
	    left: 450px;
	    top: 50px;
	}


		/* SLIDE 2 */

	.explanation-fotokasa {
		top: 20px;
	    left: 116px;
	    width: 200px;
	}

	.explanation-fotokasa-arrow {
		width: 370px;
	    height: 135px;
	    left: 107px;
	    top: 83px;
	}

	.explanation-settings {
	    top: 2px;
	    left: 573px;
	    width: 242px;
	}

	.explanation-settings-arrow {
	    width: 353px;
	    height: 72px;
	    left: 419px;
	    top: 33px;
	}

	.explanation-rebate {
	    top: 203px;
	    left: 549px;
	    width: 235px;
	}

	.explanation-rebate-arrow {
	    width: 325px;
	    height: 69px;
	    left: 420px;
	    top: 260px;
	}


		/* SLIDE 3 */


	.explanation-accounts {
		top: 54px;
	    left: 117px;
	    width: 222px;
	}

	.explanation-accounts-arrow {
		width: 282px;
	    height: 138px;
	    left: 125px;
	    top: 87px;
	}

	.explanation-deposits {
		top: 3px;
	    left: 569px;
	    width: 198px;
	}

	.explanation-deposits-arrow {
	    width: 320px;
	    height: 80px;
	    left: 455px;
	    top: 36px;
	}


	.explanation-comfort {
		top: 200px;
	    left: 553px;
	    width: 195px;
	}

	.explanation-comfort-arrow {
	    width: 332px;
	    height: 143px;
	    left: 410px;
	    top: 196px;
	}

	.section-heading h2 {
		font-size: 1.9em;
	}

	.box-separator img {
		padding-top: 3%
	}

	.explanations-wrapper {
		width: 900px;
	    margin-left: -450px;
	    margin-top: -200px;
	}

}   



/* DESKTOP  */
@media only screen and (min-width: 980px) {
	.show-in-mobile {
		display: none;
	}

	.hide-in-mobile {
		display: inline-block;
	}
	.hide-in-mobile-block {
		display: block;
	}


}   


/* LAPTOP */ 
@media only screen and (min-width: 980px) and (max-width: 1400px) and (max-height: 700px) {

	.main-headline img {
	 	width: 65%;
	}

	.store-wrapper {
		left: 13%;
	}

	.section6 .store-wrapper {
		left: 50%;
	}

	.section-heading h2 {
		padding: 10px 0;
	}

	.button-demo-wrapper {
		bottom: 4%;
    	right: 200px;
    	float: left;
	}
	.fp-slidesNav.bottom {
		bottom: 7%;
	}

} 


/* LAPTOP low height*/ 
@media only screen and (min-width: 980px) and (max-width: 1400px) and (max-height: 550px) {

	.main-headline img {
	 	width: 50%;
	}

} 


/* section 6  FIX */ 

@media only screen and (min-width: 979px) and (min-height: 660px) {
	#section6-content .footer-wrapper {
		position: absolute;
	}
}

@media only screen and (min-width: 979px) and (min-height: 800px) {
	#section6-content #formWrapper {
		margin-top: 11%;
	}
}



/* MOBILE */
@media only screen and (max-width: 979px) {

	.section2,
	.section3,
	.section5,
	.section6 {
		height: 100%!important;
	}

 	#section2-content,
 	#section3-content,
 	#section4-content,
 	#section5-content {
 		background-image: none;
 	}
 	.section2 .down-arrow-wrapper,
 	.section3 .down-arrow-wrapper,	
 	.section5 .down-arrow-wrapper {
 		position: static;
 		margin: 0 auto;
 		padding-bottom: 5px;
 	}

	.section2,
	.section4 {
   		background-color: #dfdfdf;		
	}

	.section3,
	.section5 {
   		background-color: #f6f6f6;	
	}	

	#section1-content {
	    background-image: url("../img/bg/bg-photo1-medium.jpg"); 
	}	

	.fullscreen-bg {
		display: none;
	}


	#section6-content {
	    background-image: url("../img/bg/bg-photo6-medium.jpg");
	    height: auto;
	}

	#fp-nav {
		display: none;
	}

	.store-wrapper {
	    width: 320px;
	    margin-left: -160px;
		font-size: 0;
		line-height: 0;	    
	}

	.store-wrapper img {
		width: 150px;
	}
	.store-link-google {
		margin-right: 20px;
	}
	.main-headline {
		font-size: 1em;
    	height: auto;
	}



/* SECTION 2 */



	.columns-wrapper {
		overflow: hidden;
	}

	.columns-wrapper .column-element {
		float: none;
	}

	.position-2.store-wrapper {
		position: static;	
		margin: 20px auto 50px;	   
		text-align: center;
		width: 100%;
		clear: both;
	}

	.position-2 .store-link {
		position: static;	
	}

	.button-demo-wrapper {
		position: static;
		margin: 70px auto 0;		
		width: 100%;	
	}

	.button-demo {
		font-size: 1.1em;
		width: 80%;
		position: static;
		margin: 0 auto;
	}

	.columns-wrapper {
		height: auto;
	}

	.columns-wrapper .column-2 {
		display: none;
	}

	.columns-wrapper .column-1,
	.columns-wrapper .column-3 {
		width: 100%;
		height: auto;
	}
	.box-separator img {
		padding: 0;
	}

	.info-wrapper p {
		display: none;
		font-size: 1.1em;
		margin-left: -18%;
	}
	    
	.box-element {
		height: auto;
	}

	.box-separator {
		margin: 0;
		width: 100%;
	}

	.info-wrapper h3 {
	    font-size: 1.5em;
	    line-height: 3em;		
	    margin-bottom: 0;
	}

	.icon-wrapper {
		padding-top: 0;
		float: left;
		width: 20%;
	}	
	.icon-wrapper img {
		max-width: 40px;
	}

	.section-heading h2 {
	    font-size: 2.4em;
	}

	.mobile-device .icon-wrapper {
		float: left;
    	padding-top: 12px;		
	}
  
	.show-in-mobile {
		display: block;
	}

	.hide-in-mobile	{
		display: none;
	}

	.down-arrow img, .up-arrow img {
		width: 40px;
	}

	.mobile-function-screen {
		width: 150px;
		margin: 15px auto;
	}


	/* section 3 */
	.phone-wrapper {
		background: none;
		width: 0;
		height: 0;
	}
	.arrow-element {
		display: none;
	}
	.phone-screen {
		display: none;
	}

	.explanations-wrapper {
		width: 100%;
		margin-top: 40px;
		position: relative;
		margin-left: 0;
		left: 0;
	}

	.explanations-wrapper .explanation-element {
		font-size: 1.2em;
		position: static;
		width: 65%;
		height: auto;
		padding-bottom: 20px;
		margin: 0 auto;
	}

	.fp-slidesNav.top {
		top: 70px;
	}

	/* section 4 */	

	.video-wrapper {
		width: 95%;
		margin-top: 30px;
		margin-bottom: 5%;

	}

	/* section 5 */

	.faq-wrapper {
		width: 90%;
		font-size: 1.4em;
	}

	.questions-categories-wrapper {
		width: 100%;	
		margin-bottom: 15%;
	}

	.questions-categories ul{
		margin: 10px 0 10px 40px;
		font-size: 1.1em;
	}

	.questions-wrapper {
		width: 90%;
		margin-bottom: 30px;
	}

	.answers-wrapper {
		float: none;
		clear: both;
	}

	.questions-categories li,
	.questions li {
		line-height: 2.5em;
	}

	.questions-categories .questions:after {
		content: none;
	}

	/* section 6 */
	.section6 .store-wrapper {
	    position: static;
	    margin: 10px auto; 
	    width: 320px;
	}	

	.section6 .section-heading {
		position: static;
		width: 100%;
	}



}   


/* TABLETS PORTRAIT */
@media only screen and (max-width: 769px) {

}


/* BIG SMARTPHONES */
@media only screen and (max-width: 736px) and (max-height: 736px) {

	/* section 1 */	
	.mobile-headline {
		font-size: 2em;
		margin-top: 10%;
	}
	.citi-logo {
		width: 60%;
		max-width: 232px;
	}
	.header-lang {
		right: 12px;
		font-size: 1.3em;
	}
	.button-demo {
		width: 90%;
	}

	.section-heading h2,
	.section-heading h3 {
		font-size: 2em;
		padding-left: 10px;
		padding-right: 10px;
	}

}



/* SMARTPHONES LANDSCAPE */
@media only screen and (max-width: 480px) {
	body {
		font-size: 80%;
	}

	.info-wrapper h3 {
		font-size: 1.3em;
	    line-height: 3.5em;
	}

	.box-separator {
		text-align: center;
	}

	.box-separator img {
		width: 90%;
		display: inline-block;
	}

	.icon-wrapper img {
		width: 55%;
	}
	.footer-text {
		padding: 8px;
	}

}

/* SMARTPHONES LANDSCAPE only */
@media only screen and (max-width: 480px) and (max-height: 320px){
	.section4 {
		min-height: 420px;
	}
	.video-wrapper {
	    width: 90%;
	}

}


/* SMARTPHONES PORTRAIT */
@media only screen and (max-width: 300px) {

}