/**
*  Homepage (landing page) of the /users app.
*  The whole entrance animation is a CSS transition: #content starts faded
*  and shifted down, the "shown" class (added on load) lets it slide in.
*/

#content{
	text-align:center;
	padding: 5.1rem var(--page-margin);
}

#content.faded{
	opacity:0;
	top:1.28rem;
}

h2{
	color:#777;
	font-weight: 400;
}

p{
	display:block;
	width: 100%;
	margin:0 auto;
	/* line-height:1.78rem; */
	height:auto;
}

.description{
	margin-top: 4rem;
	text-align: justify;
}

#points{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
	width:100%;
	margin-top: 4rem;
}

#points li{
	display:inline-block;
	width:100%;
	vertical-align:top;
}

#points li .titles{
	display:block;
	width:100%;
	font-size:1.11rem;
	line-height:1.78rem;
	height:1.78rem;
	color:#ff6600;
}

#points li p{
	display:block;
	width:100%;
	font-size:0.9rem;
	line-height:1.44rem;
	height:auto;
	color:#555;
}

#buttons_row{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3rem;
	width: 70%;
	margin: 0 auto;
	margin-top: 4rem;
}

#buttons_row .buttons{
	width:100%;
	vertical-align:top;
}

#sign_up_note{
	display:block;
	width:100%;
	margin-top: 1rem;
}



@media (max-width: 12cm){

	body{
		min-width:auto;
	}

	#main_layer{
		background:#fff;
	}

	#outer_content{
		min-width:100%;
	}

	#content{
		width:100%;
		min-width:100%;
		padding:0px 4vw 12vw 4vw;
	}

	.h_spacers{
		display:none;
	}

	.mobile_h_spacers{
		display:block;
	}

	.titles{
		width:100%;
		font-size:8vw;
		line-height:10vw;
		height:auto;
	}

	.normal_texts{
		width:100%;
		font-size:4.4vw;
		line-height:7vw;
		height:auto;
	}

	#claim{
		font-size:9vw;
		line-height:11vw;
	}

	#description{
		width:100%;
	}

	#points li{
		display:block;
		width:100%;
		margin:0px 0px 6vw 0px;
	}

	#points li .titles{
		font-size:5.4vw;
		line-height:8vw;
		height:auto;
	}

	#points li .normal_texts{
		font-size:4vw;
		line-height:6.4vw;
	}

	#buttons_row .buttons{
		display:block;
		width:100%;
		height:12vw;
		margin:0px 0px 4vw 0px;
		border-radius:2.6vw;
	}

	#buttons_row .buttons span{
		font-size:4.4vw;
		line-height:11vw;
		height:100%;
	}

	img.hdrs{
		height:4.4vw;
		top:4.2vw;
		left:4vw;
	}

	.top_bar_bgs, .top_bars_spacers{
		height:13vw;
	}
}