/* -------------------------------------------------- */
/* Reset - http://purecss.io/base
/* -------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}.hide{position: absolute;left:-9999px;white-space:nowrap;}html{box-sizing: border-box;}*,*:before,*:after{box-sizing:inherit;}.clear{font-size:0px;clear: both;height: 0px;}*:focus{outline: none;}strong{font-weight:bold;}em{font-style:italic;}input:invalid{box-shadow: none;}button{border:none;background:none;padding:0;margin: 0;}button::-moz-focus-inner{border:0;}input,button{border-radius:0;}html{scroll-behavior: smooth;}

/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
body{
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: #121212;
}
h1, h2, h3, h4{
	line-height: 1.1em;
	padding: 9px 0;
	font-weight: 800;
}
h1{ font-size: 54px; }
h3{ font-size: 24px; }
h4{ font-size: 18px; }

.container{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 12px;
}
p{
	padding: 9px 0;
	line-height: 1.6em;
}
a,a:visited,a:active{
	color: #121212;
}

/* -------------------------------------------------- */
/* Main
/* -------------------------------------------------- */
main{
	background: linear-gradient(135deg,#0cc7b1 0%,#129fca 45%,#1e82d6 75%,#1e5bc7 100%);
	background: url('/assets/images/landing-bg.webp') no-repeat;
	background-size: cover;
}
.img-bg{
	background: url('/assets/images/soccer-fan.webp') no-repeat;
	background-size: 640px auto;
	padding: 24px 0 24px 640px;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.text{
	padding: 12px 24px 24px 24px;
	background: #fff;
}
.center{ text-align: center; }
p.callout{
	font-weight: 500;
	padding: 0 0 9px 0;
}

/* Form */

form{
	padding: 15px 0 0 0;
}

.form-row{
	padding: 0 0 9px 0;
}
.form-cols{
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
}
.form-col{
	width: 50%;
	padding: 6px;
}

input, select{
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #121212;
	padding: 12px;
	border: none;
	background: #efefef;
	width: 100%;
}
label{
	display: block;
	font-size: 13px;
	font-weight: 700;
	padding: 0 0 6px 0;
}
.hint{
	font-size: 11px;
	padding: 6px 0 0 0;
	opacity: .5;
	font-weight: 500;
}
.form-row.check{
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.form-row.check input{
	width: auto;
	padding: 0;
}
.form-row.check label{
	font-weight: 400;
	flex-grow: 1;
}
.form-row.check label p{
	padding: 0;
}
a.btn,
button.btn{
	display: inline-block;
	padding: 24px 36px;
	background: #0866ff;
	font-family: 'Inter', sans-serif;
	font-size: 21px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
a.btn{
	padding: 18px 24px;
	font-size: 16px;
}
a.btn:hover,
button.btn:hover{
	cursor: pointer;
	background: #2a7bff;
}

.alert{
	background: #ffdfdf url('/assets/images/alert.svg') no-repeat 12px 12px;
	color: red;
	padding: 12px 12px 12px 42px;
}
.m-img{
	display: none;
	background: url('/assets/images/soccer-fan.webp') no-repeat center top;
	background-size: 500px auto;
	height: 250px;
	margin-top: -24px;
}

/* -------------------------------------------------- */
/* Footer
/* -------------------------------------------------- */

footer{
	font-size: 12px;
	text-align: center;
}

/* -------------------------------------------------- */
/* Breakpoints
/* -------------------------------------------------- */
@media screen and (max-width: 1200px) {
	.img-bg{
		padding-left: 480px;
	}
}
@media screen and (max-width: 1000px) {
	.img-bg{ 
		display: block;
		padding: 0;
		background: none; 
	}
	.m-img{ display: block; }
}
@media screen and (max-width: 500px) {
	.m-img{
		background-size: 100% auto;
		height: 150px;
	}
	h1{ font-size: 36px; }
	.form-cols .form-col{
		width: 100%;
	}
}