@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700|Titillium+Web:400,700'); 
:root { 
/* Colors */
 --orange: #fab707; 
 --white: #ffffff; 
 --black: #000000; 
 --gray: #25303a; 

/* Fonts */

 --Linotte: 'Linotte', sans-serif; 
 --Avenir_Light: 'Avenir-Light', sans-serif; 
 --Montserrat: 'Montserrat', sans-serif; 
 --Titillium: 'Titillium', sans-serif;  
}


@font-face {
	font-family: Montserrat;
	src: url('../fonts/Montserrat-Regular.ttf');
	font-weight: 400;
}
@font-face {
	font-family: Montserrat;
	src: url('../fonts/Montserrat-SemiBold.otf');
	font-weight: 500;
}
@font-face {
	font-family: Montserrat;
	src: url('../fonts/Montserrat-Bold.otf');
	font-weight: 600;
}
@font-face {
	font-family: Titillium;
	src: url('../fonts/Titillium-Regular.otf');
	font-weight: 400;
}
@font-face {
	font-family: Titillium;
	src: url('../fonts/Titillium-Bold.ttf');
	font-weight: 600;
}
@font-face {
	font-family: Linotte;
	src: url('../fonts/Linotte-SemiBold.otf');
	font-weight: 500;
}

@font-face {
	font-family: Avenir-Black;
	src: url('../fonts/Avenir-Black.ttf');
}

@font-face {
	font-family: Avenir-Roman;
	src: url('../fonts/Avenir-Roman.ttf');
}


/* GENERAL */

* { box-sizing: border-box; } 
body { position: relative; } 
html, body { min-height: 100vh; margin: 0; padding: 0; } 
.mvm { font-family: 'Avenir-Black'; font-size: 50px; color: var(--gray); line-height: 1.7rem;  } 
.container-fluid { margin: 0; padding: 0; overflow: hidden; } 
b { font-weight: 900; } 
.bg_orange {background-color: var(--orange);height: 640px;position: relative; height: 100%}
.max-height { max-height: 100%}
.margin-top-25 {margin-top: 25px}

/* SECTION 1 */

.section_1 { height: 100vh; background-image: url(../images/header_bg_big.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; font-family: var(--Nunito); width: 100%; color: var(--white); position: relative; } 
nav { margin-top: 50px; border: none; } 
nav ul{ list-style-type: none; float: left; padding-left: 50px; margin-top: 50px auto;} 
nav ul li a, nav ul li span { font-size: 1.1rem; font-family: var(--Linotte); font-weight: 300; color: #fff; letter-spacing: 1px; background-color: transparent; } 
nav ul li a:focus { background: transparent !important; color: var(--orange); } 
nav ul li span { padding: 0px 5px; } 
nav ul li { display: inline-block; padding: 20px 30px; } 
nav ul li a { display: inline-block; } 
nav ul li a:hover { text-decoration: none; color: var(--orange); background-color: transparent; } 
.login { border: 1px solid white; color: var(--white); font-family: var(--Linotte); border-radius: 100px; height: 45px; width: 120px; background-color: transparent; } 
.login:hover { background-color: var(--orange) !important; } 
.login a:hover { color: var(--black) !important; } 
.hero_text { font-size: 53px; font-family: var(--Linotte); line-height: 4rem; padding-top: 45vh; } 
.button { cursor: pointer; margin-top: 1.5rem; margin-left: -15px; } 
.start { font-family: var(--Avenir_Light); display: flex; flex-wrap: wrap; align-items: center; letter-spacing: .3rem; font-size: 23px;} 
.play a { text-decoration: none; } 
.underline { padding-bottom: 10px; border-bottom: 1px solid white; margin-left: 1rem; margin-right: 3rem; margin-top: 2rem; } 
.underline:hover { border-bottom-color: var(--orange)}
.underline a, .where a { text-decoration: none; color: var(--white); } 
.underline a:hover, .where a:hover { color: var(--orange) } 
.where { margin-top: 1.5rem; } 
.button_change { display: none; } 
.oval { position: absolute; top: 80%;left:48% } 


/* RESPONSIVE MENU */

.responsive-menu { display: none; }
.responsive_menu.active { position: fixed; display: flex !important; }
.responsive_menu { z-index: 10000; width: 100vw; height: 100vh; color: #fff; position: relative; }
.responsive_menu span { position: absolute; top: 25px; right: 25px; font-size: 2.5rem; }
.responsive_menu ul { list-style-type: none; padding-left: 0; width: 100%; }
.responsive_menu ul li { font-size: 2.1rem; opacity: 0; padding-bottom: 2rem }
.responsive_menu ul li a { font-family: var(--Linotte), sans-serif; color: #fff; font-weight: 200; text-decoration: none;}
.responsive_menu ul li a:hover {color: var(--gray)}
.vertical_align { display: flex; align-items: center; }
.glyphicon-remove:hover { cursor: pointer; }


/* SCROLL */

.scrolled { margin-top: 0; background-color: rgba(0, 0, 0, 0.7); padding-top: 5px} 
.smaller { height: 50px; margin-left: 50px; margin-right: 20px; }

/* SECTION 2 */

.arena, .kiosk { padding: 25px; height: 640px; }
.mvm { font-size: 3.6rem; line-height: 4rem; max-width: 500px}
.arena p, .kiosk p {font-size: 1rem; font-family: 'Montserrat'; font-weight: 400; line-height: 20px; padding-bottom: 2rem; }
.arena_banner, 
.kiosk_banner { width: 640px; padding-left: 0;} 
.arena_text, 
.kiosk_text { color: #333; font-family: var(--Linotte); font-weight: 800;  } 
.arena_text { top:0;padding-left: 75px;padding-top: 60px;height: 380px; padding-left: 100px;max-width: 480px; position: absolute;}
.arena_text h1 { font-size: 3.5rem; margin-bottom: 1rem; }
.arena_text h2 { font-size: 2rem; margin-bottom: 1.5rem; line-height: 35px} 
.arena_text p, 
.kiosk_text p { color: #333 !important; font-family: var(--Linotte); line-height: 2rem; font-weight: 800; } 
.kiosk_text {position: absolute;top: 0;margin-top: 35px; padding: 40px 60px;font-size: 1.5rem;width: 500px;}
.button_arena, 
.button_kiosk { margin-top: 2rem; margin-left: 1.5rem; } 
.center-block {display: inline;}
.orange {height: 100%;}

/* SECTION 3 */

.section_3 {height: 980px; background-color: #f2f2f2; position: relative; }
.big_card {background-image: url(../images/big_card.jpg); background-size: cover; background-repeat: no-repeat; background-position-x: 40%;  animation: slideinCard 1s; } 
.big_card_logo_img { position: absolute; left: 50px; top: 50px; height: 150px; width: auto;} 
#cashcard_big_card { font-family: 'Montserrat'; font-weight: 400; font-size: 1rem; display:flex; justify-content: center; flex-direction: column; height: 960px} 
#cashcard_big_card ul li { margin-bottom: 0.5rem; } 
#cashcard_big_card ul li::after { content: ""; display: block; width: 19rem; border-bottom: 1px solid #000; margin: 0.5rem 0 auto; } 
.cashcard_big_card_p { margin-top: 1.5rem; line-height: 1.5rem; padding:0 30px; max-width: 1050px} 
.cashcard_mvm.mvm { margin-bottom: 2rem; font-size: 3.5rem}
 @keyframes slideinCard {
	from {
	  background-position-x: 100%;
	}
	to {
		background-position-x: 40%;
	}
  } 


/* SECTION 4 */

#alkalmazas { font-family: var(--Titillium); display: flex; padding-left: 15px } 
#mobilapp { width: 80%; overflow: hidden;  margin-top: 10%; margin-left: 10%; animation: slidein 1s ease-in; } 
#download_header { display: inline-block; margin-top: 2rem; margin-bottom: 2rem; font-family: 'Montserrat', sans-serif;  font-weight: 800; font-size: 3.5rem; padding-bottom: 1.5rem; padding-top: 2rem; color: var(--gray) } 
.step_body { font-family: var(--Avenir_Light);display: flex; flex-wrap: wrap; flex-direction: row;  margin-left: 1rem; line-height: 1.4rem; padding: 0 } 
.number { width: 60px; height: 60px; font-size: 2.3rem; background-color: var(--orange); border-radius: 50%; padding: 10px 20px; color: var(--white); display: block; float: left;} 
.step_header { font-size: 1.8rem; font-family: Avenir-Black;  font-weight: bold; color: var(--orange); display: flex; margin-bottom: 1rem;line-height: 2rem} 
.phone { height: 100vh; } 
.phone_p { font-family: var(--Avenir_Light); line-height: 1.5rem; margin-bottom: 2rem;} 
.appstore { margin-right: 20px; } 
.app_buttons { padding: 2rem 0 4rem; display: flex; flex-direction: row; justify-content: left;} 
.height {height: 250px; margin-top: 2.5rem}
.mobile {height: 100%;}
@keyframes slidein {
	from {
	  margin-left: 100%;
	}
  
	to {
	  margin-left: 5%;
	}
  }

/* FOOTER */

footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: .9rem; padding-top: 30px; align-items: flex-start; line-height: 1.5rem; } 
.footer_logo { display: block; margin-left: 20px } 
.footer_1 { flex-direction: row; font-family: var(--Avenir_Light); color: var(--white); justify-content: center; } 
.footer_2 {  font-family: var(--Avenir_Light); color: var(--white); list-style: none; display: flex; justify-content: center;  }
.footer_2 a, .footer_3 a { color: var(--white); text-decoration: none; } 
.footer_2 a:hover, .footer_3 a:hover { color: var(--black); } 
.footer_3 {  font-family: var(--Avenir_Light); color: var(--white); list-style: none; display: flex; justify-content: center; } 
.footer_4 { display: flex; justify-content: center; font-family: var(--Avenir_Light); color: var(--white); font-size: .8rem } 
.copy { font-family: var(--Avenir_Light); color: var(--white); padding-left: 0} 
.social ul { display: flex; flex-wrap: wrap; } 
.social ul li { margin: 0 5px; } 
.social li a { color: var(--white);} 
.copy_social { display: flex; flex-wrap: wrap; flex-direction: row; align-content: space-between; margin-top: 100px; } 
.footer_container { margin-bottom: 2rem; } 


/***************************** MEDIA QUERIES *******************************/


 /* Extra small */

 @media (max-width: 400px) {

	/* SECTION 1*/
	.hero_text {font-size:28px; letter-spacing:1.5px; line-height: 35px;padding-top: 250px }

	 /*SECTION 2 */
	.kiosk h2, .arena h2 {font-size: 2rem;line-height: 2rem; padding-top: 30px}
	.arena, .kiosk {padding: 0 15px; height: 100%;}
	.arena_banner {height: 100%; padding-right: 0;}
	.arena_text { top: 0; padding-left: 25px; padding-top: 40px; }
	.arena_text h1 { font-size: 2.5rem; margin-bottom: .5rem; }
	.arena_text h2 { font-size: 1.5rem; margin-bottom: .5rem; line-height: 2rem; max-width: 250px}
	.arena_text p, .kiosk_text p { font-size: 1rem; max-width: 250px; line-height: 1.2rem; }
	.kiosk_text {position: absolute;top: 0;margin-top: 20px;padding-top: 0; padding-left: 20px; font-size: 1.5rem;width: 270px;}

	 /*SECTION 3*/
	 
 	.section_3 h1 { margin-bottom: 1rem; font-size: 2.5rem}
 	.big_card_logo_img {height: 100px; }
	.section_3 h1 { margin-bottom: 1rem; font-size: 1.6rem}
	.big_card_logo_img {height: 70px; left: 10px}
	.big_card { background-image: url(../images/1card.png); background-size: cover; background-position: center;  } 
	#cashcard_big_card { width: 90%; height: 750px; font-size: 1rem } 
	#cashcard_big_card ul li { font-size: 1rem; line-height: 1.3rem} 
	.big_card ul { display: flex; flex-direction: row; flex-wrap: wrap; padding-left: 0} 
	.cashcard_big_card_p { line-height: 1.3rem; padding: 0 15px; font-size: 1rem} 
	.cashcard_mvm.mvm { margin-top: 2rem; padding-left: 0; font-size: 2rem; width: 300px;} 

	/* SECTION 4*/

	.height {padding-left: 0}
	#download_header {font-size: 1.5rem; padding-left: 10px}
	.step_header {font-size: 1.5rem}
	.step_body {margin-left: 10px}
	.max-height {padding-left: 0}
	.appstore, .googleplay { justify-content:center; width: 90%;margin-top: 50px} 
	.appstore {margin-right: 0;}

	/*FOOTER*/
	
	footer { height: 100%; } 
	.footer_1 p { display: none; } 
	.footer_1 p { display: none; } 
	.footer_2, .footer_3, .footer_4  { justify-content: left; margin-left: 10px} 
	footer ul li { font-size: 1.2rem; line-height: 40px; font-weight: 300; } 
	.footer_logo {margin-left: 20px}
	.footer_2, .footer_3 { width: 80%; } 
}


/* Mobile   (xs) */

/* SECTION 1 */

@media screen and (max-width: 767px){
	.hero_text {padding-left: 30px}
	.scrolled { padding-bottom: 50px;}
	.smaller { margin-left: 0; margin-right: 0; }
	.glyphicon-menu-hamburger::before {position: absolute; margin-top: 2rem;}
	.glyphicon-menu-hamburger { font-size: 2em; color: #fff; float: right; margin-right: 3rem; }
	.underline { display: none; } 
	.where { font-size: 1rem; letter-spacing: 0; border-bottom: 1px solid white; margin-left: 15px } 
	.button { display: none; } 
	.oval_button { display: none; } 
	}
   
@media(min-width:401px) and (max-width:767px){
	
	/*SECTION 2 */

	.arena_banner, .kiosk_banner, .orange {width: 100%} 
	.arena_text {position: absolute; top: 0; padding-left: 50px; }
	.arena_text h1 { font-size: 3rem; margin-bottom: .5rem; }
	.arena_text h2 { font-size: 1.9rem; margin-bottom: 1rem; line-height: 35px; max-width: 500px}
	.center-block {display: flex; justify-content: center; padding-top: 30px}
	.mvm {font-size: 2rem;line-height: 2rem;}
	.kiosk_text {max-width: 420px; padding-top: 30px; padding-left: 40px;margin-top: 10px}

	

	/*SECTION 3*/

	.section_3 h1 { margin-bottom: 1rem; font-size: 2.5rem}
	.big_card_logo_img {height: 100px; padding-bottom: 1rem}
	#cashcard_big_card { left: 2%; top: 8%; margin-left: 1rem; width: 90%; height: 700px; font-size: 14px; line-height: 1.3rem } 
	#cashcard big_card ul li {font-size: 14px; }
	.cashcard_big_card_p { font-size: 14px} 
	.cashcard_mvm.mvm { font-size: 2rem;margin-top: 2rem; padding-left: 15px}
	.big_card { background-image: url(../images/1card.png); background-size: cover; background-position: center; } 
	
	/* SECTION 4*/

	#mobilapp { display: none; } 
 	.download { width: 100%; margin: 0; } 
 	#download_header { padding: 10px; font-size: 1.8rem; } 
 	.step_header {font-size: 1.5rem}
 	.step_1, .step_2, .step_3, .step_4 { width: 75%; margin-left: 2rem; } 
 	.step_body {margin-left: 5px}
 	.app_buttons {justify-content: center}
 	.appstore, .googleplay { margin-top: 50px; } 
 	.appstore { margin-right: 10px; justify-content: space-between}
 	.height {height: 180px; }
 	.number_box { margin-right: 10px}
 
	/*FOOTER*/

	footer { height: 100%; } 
 	.footer_1 p { display: none; } 
 	.footer_1 p { display: none; } 
 	.footer_2, .footer_3, .footer_4  { justify-content: left; margin-left: 10px} 
 	footer ul li { font-size: 1.2rem; line-height: 40px; font-weight: 300; } 
 	.footer_logo {margin-left: 20px}
 	.footer_2, .footer_3 { width: 80%; } 
 	.footer ul li a {cursor: pointer;}
}

/* Tablet   (sm) */

/* SECTION 1*/

@media screen and (max-width: 994px){
	.navbar-nav { margin: 0; left: 12%; } 
	nav li a { padding-right: 0; margin: 5px; } 
	nav ul li {padding: 20px 5px;  } 
	nav ul li a, 
	.nav ul li span { font-size: .8rem; padding: 5px; } 
	.login { width: 70px; } 
	#header_logo { height: 70px; } 
	.where, 
	.underline { font-size: 1rem; letter-spacing: 0; } 
	}
   
@media(min-width:768px) and (max-width: 991px){

	/*SECTION 1*/

	.scrolled {padding-bottom: 15px}
	.smaller {margin-left: 0}

	/*SECTION 2 */

	.section_2 {max-height: 100%}
	.arena_text {width: 300px;padding-left: 50px;padding-top: 220px; margin-top: 75px;}
	.kiosk_text {padding-left: 30px}
	.arena_text h1 { font-size: 2.8rem; }  
	.arena_text p,
	.kiosk_text p {font-size: 1rem;line-height: 2rem;width: 300px;padding-top: 150px} 
	.kiosk_text p {padding-left: 0;}
	.arena_text p {padding-top: 0}
	.center-block {display: flex; justify-content: center;}
	.mvm {margin-top: 0;padding-top: 0; font-size: 2.5rem; line-height: 2.5rem}
	.arena, .kiosk { padding-top: 20px; max-height: 100%}
	.arena p, .kiosk p {font-size: 14px; line-height: 1.2rem}
	.arena_banner { padding-top:180px}

	/*SECTION 3*/

	.section_3 h1 { margin-bottom: 1rem; font-size: 2.5rem}
	.big_card_logo_img {height: 100px;}
	#cashcard_big_card { height: 700px } 
	.cashcard_big_card_p { line-height: 1.5rem } 
	.cashcard_mvm.mvm { font-size: 2.3rem;margin-top: 2rem}
	#cashcard_big_card ul li::after {width: 17.5rem}

	/* SECTION 4 */

	#cashcard_big_card { font-size: .8rem; top: -10%; } 
	#download_header {font-size: 2.3rem}
	.step_header {font-size: 1.5rem}
 	.download { width: 100%; margin: 0; margin-top: 2rem; } 
 	.phone { display: none; } 
 	.phone_p {margin-top: 2rem}
 	.height { height: 200px;}
 	.app_buttons {  display: flex; flex-direction: row; justify-content: center;} 

	/*FOOTER*/

	footer { height: 100%; } 
}

/* Laptop   (md) */

/* SECTION 1*/

@media screen and (min-width: 995px) and (max-width: 1200px){
	.scrolled { padding-bottom: 25px;}
	.nav ul li { padding: 15px 15px 0 15px; } 
	}
   
@media(min-width:992px) and (max-width: 1199px){
	
	/*SECTION 2 */

	.arena_text { width: 400px; padding-top: 50px}
	.arena_text p {line-height: 1.5rem}
	.arena_banner {padding-top: 32px;}
	.arena_text {padding-top: 100px;padding-left: 75px;}
	.oval_button {margin-top: 20px}

	/*SECTION 3*/

	.section_3 h1 { margin-bottom: 1rem; font-size: 2.5rem}
	.cashcard_mvm.mvm { font-size: 3.5rem;line-height: 3.5rem}
}


 
@media (min-width: 1919px) {
	
	/*SECTION 2 */

	.arena_text {max-width: 700px;}
	.arena_text h1 { font-size: 4.5rem; margin-bottom: 2rem; }
	.arena_text h2 { font-size: 3rem; margin-bottom: 1rem; line-height: 50px; }
	.arena_text p { font-size: 1.8rem; line-height: 50px;}
	.orange{position: relative;}
	.kiosk_text {margin-top: 25px;position: absolute;padding-left: 80px;max-width: 450px;}
	.kiosk_text p {width: 450px;line-height: 2.4rem; }
}