.invisible, .mobile{display: none; }
html,body{
	background: none;
	background-color: rgb(240, 240, 240);
	color: #323c46;
}

.inner-wrap, .inner-wrap-wrap{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

section{
	display: table;
	height: 100%;
}

section .inner-wrap{
	display: table-cell;
	vertical-align: middle;
	overflow-x: hidden;
}

br.clear{clear: both; height: 0px !important; line-height: 0px !important; }

h1{
	margin-top: 0px;
	padding-top: 30px;
	padding-bottom: 70px;
	text-align: center;
}

#frontpage-toolbar{
	background-color: rgba(235, 240, 246, 0.95);
	position: absolute;
	left: 0px;
	top: 0px;
	height: 58px;
	z-index: 1000;
	width: 100%;
}

section{
	width: 100%;
	height: 100%;
}

#login_links, #welcome, #logo-vert{
	display: table;
	height: 100%;
}

#login_links .btn-group, #logo-wrap{
	display: table-cell;
	vertical-align: middle;
}

#login_links .btn, #login_links_mobile .btn{
	color: #fff;
	border: 0px;
	text-transform: uppercase;
}

#login_links .btn:first-child{
	border-right: 1px solid #fff;
	margin-right: 1px;
}

#login_links_mobile{
	text-align: center;
	width: 100%;
	margin-top: 20px;
}

#login_links_mobile .btn{
	margin: 10px;
	width: 130px;
}

#logo{
	background: url('../images/logo-01.svg') center center no-repeat;
	height: 37px;
	width: 180px;
}

#logo img{
	width: 100%;
	height: auto;
}

.fs-button:hover{
	background-color: #3ea2e6;
}

.fs-button:focus {
    background-color: #3ea2e6;
}


.combo .txt{
	font-size: 18px;
	width: 38%;
	line-height: 35px;

}

.combo.left .txt, .combo.right .img{
	float: left;
}
.combo.left .img, .combo.right .txt{
	float: right;
}

.combo{
	padding-bottom: 30px;
}

.combo .txt p{
	margin-bottom: 50px;
}

.combo .img img{
	width: 100%;
	height: auto;
}

#welcome{
	background-color: #77b4e7;
	background: url('../images/frontpage-large.jpg') center center no-repeat;
	background-size: cover;
	position: relative;
}

#moto-text{
	width: 953px;
	height: 127px;
	background: url('../images/spend-money.svg') center center no-repeat;
	margin: 0 auto;
}

/* section 2*/

#text-intro{
	background-color: #f5f5f5;
}

#text-intro div.img{
	background: url('../images/flatbook-1920.png') center center no-repeat;
	background-size: contain;
	width: 80%;
	margin-right: -20%;
	display: block;
}

#text-intro .txt{
	padding-top: 4%;
}

/*section 3 - how it works*/
#how-it-works{
	background-color: #323c46;
}

#how-it-works h1{
	text-align: left;
}

#how-it-works h1,#how-it-works .txt{
	color: #f5f5f5;
}

#how-it-works .txt p{
	margin-bottom: 20px;
	line-height: 25px;
}

#how-it-works .txt{
	width: 40%;
}

#how-it-works div.img{
	background: url('../images/scheme-1064.png') center center no-repeat;
	width: 45%;
	margin-top: -2%;
	margin-left: 5%;
	background-size: contain;
}

/*footer*/

#footer{
	border-top: 10px solid #e3e3e3;
}
#footer .socicons{
	font-size: 50px;
	color: #aaaaaa;
	padding: 25px 15px 15px 15px;
	text-align: center;

}

#footer hr{
	height: 10px;
	border-top: 5px solid #ededed;
	margin: 0px;
	max-width: 500px;
	display: block;
	margin: 0 auto;
}
.socicons a{
	text-decoration: none;
	color: #aaa;
}

.socicons a:hover{
	color: #888;
}

#footnote{
	margin: 0 auto;
	color: #aaaaaa;
	max-width: 500px;
	text-align: center;
	padding-bottom: 30px;
	padding-top: 15px;
    overflow: auto;
}

/* Large devices (large desktops, 1200px and down) */
@media (max-width: 1200px ){
	#welcome{
		background: url('../images/frontpage-1366-800.jpg') center center no-repeat;
		background-size: cover;
	}

	.inner-wrap{
		width: 100%;
		padding-left: 50px;
		padding-right: 50px;
	}

	#moto-text{
		width: 80%;
	}

	#footer .socicons{
		font-size: 40px;
	}
}

/* Small devices (tablets, 768px and up) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.combo .txt,
	.combo .img,
	.combo.left .txt,
	.combo.left .img,
	.combo.right .txt,
	.combo.right .img,
	#how-it-works .txt,
	#how-it-works div.img
	{
		float: none;
		width: 100%;
		margin: auto;
	}

	#text-intro div.img {
	  background: url('../images/flatbook-900.png') center center no-repeat;
	  width: 100%;
	  margin-right: 0%;
	  background-size: contain;
	}

	#frontpage-toolbar{
		position: static;
		height: 58px;
		font-size: 0;
		line-height: 1;
	}

	#moto-text{
		background: url('../images/spend-money-portrait-02.svg') center center no-repeat;
		width: 100%;
		margin-top: -50px;
	}

	#how-it-works div.img{
		margin-top: 30px;
	}


}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#frontpage-toolbar{
		position: static;
		height: 58px;
		font-size: 0;
		line-height: 1;
	}
}


/*phones*/
@media (max-width: 640px ){
	.inner-wrap{
		padding: 25px 15px 25px 15px;
	}

	.combo .txt,
	.combo .img,
	.combo.left .txt,
	.combo.left .img,
	.combo.right .txt,
	.combo.right .img,
	#how-it-works .txt,
	#how-it-works div.img
	{
		float: none;
		width: 100%;
		margin: auto;
	}

	#login_links, #logo-vert, #logo{
		float: none !important;
		margin: 0 auto;
	}

	#welcome{
		height: 300px;
	}

	#frontpage-toolbar{
		position: static;
		height: auto;
		font-size: 0;
		line-height: 1;
	}

	#login_links .btn-group,
	#login_links,
	section,
	section .inner-wrap,
	#logo-vert,
	#logo-wrap,
	#moto-text-vert
	{
		display: block;
		height: auto;
	}

	#logo {
	  background: url('../images/logo-01.svg') center center no-repeat;
	  /* height: 157px; */
	  background-size: contain;
	  width: 60%;
	  height: auto;
	}

	section, #moto-text-vert{
		height: auto;
	}

	#text-intro div.img {
	  background: url('../images/flatbook-900.png') center center no-repeat;
	  width: 100%;
	  margin-right: 0%;
	  background-size: contain;
	}

	#moto-text{
		background: url('../images/spend-money-portrait-02.svg') center center no-repeat;
		width: 100%;
		margin-top: 50px;
	}

	h1{padding-bottom: 20px; padding-top: 20px; }
	.combo .txt p{line-height: 1.5em; margin-bottom: 20px;}
	.combo div.img{ margin-bottom: 30px !important; }
	.combo{ padding-bottom: 0px; }

	#welcome{
		background: url('../images/frontpage-mobile.jpg') center center no-repeat;
		background-size: cover;
	}

	h1, #how-it-works h1{text-align: center; }
	#footer hr{ width: 80%; }

	.no-mobile{display: none !important; }
	.mobile{display: block; }
}

/*other phones*/
@media (max-width: 480px ){
	#footer .socicons{
		font-size: 37px;
	}
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px ){}

/*REGARDLESS*/
#welcome .inner-wrap{
	display: table-cell;
}