@import url("userpicks.css"); 
@import url("../../../../control/style/base/default.css"); 
/* STANDARD */


/*===UNIVERSAL SETUP===*/
/* h1,h2,h3 	{ text-transform: uppercase; } */
/*===Main Navigationr===*/
/* section { grid-template-rows: var(--wh02); padding: 10px 0px; } */
/*===Form Basics===*/
/* form 		{ text-align: center; background-color: var(--light); padding:0px 0px 60px;} */
.hair {background: transparent;}
.hair .socials 		{float:left;}
.head, .head>nav { position: sticky; top:0px;}
form input, form select 	{ height: 36px; background-color:var(--white); color: var(--black); border: 0px; border-color: #fff solid transparent;  /* width: 320px; */  outline: none; }
form select:after {
	position: absolute;  outline: none; 
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 0px solid transparent;
	border-color: #fff transparent transparent transparent;
  }
form label 	{display: none;}
/* form button { background: var(--primary); color: var(--white); padding: 8px 24px 2px; font-size: 20px; margin: 0px; text-transform: uppercase; border: 0px;   
	font-family: 'head';  } */


/*===Landing===*/
#landing 			{ padding: 100px 0px 0px;  min-height: 100vh; }
#landing, .head, .hair { background-color: var(--light);background: url('../../media/cover/cover1.webp') no-repeat center fixed; background-size: cover;}
#landing figure		{ display: grid; justify-content: start; align-items: center; grid-gap: 0px 4vw; grid-template-columns:  33vw 22vw 33vw 22vw 33vw 22vw 33vw;  padding:0px 0px 0px; position:relative; overflow-x: hidden;}  /* overflow-y: hidden;}::-webkit-scrollbar {
	display: none;
  } */
h1, h2, h3 { font-family: var(--type1); font-size: var(--font4); }
h3 { font-size: var(--font3); }
h2, #pricing h1 {  color:var(--primary); }

#landing img 	{ width: 240px; margin: auto;  }
#landing p 		{ color: var(--medium); padding: var(--space3) 0px;   }
footer button 	{ border:0px; padding: var(--space2) var(--space4); margin: 0px var(--space2) var(--space2);}
#landing a:nth-child(1) button, #contact form>button, .button01a { background-color: var(--primary); color: var(--white); border:0px; }
#landing a:nth-child(2) button{ background-color: var(--secondary); color: var(--white);}
figure img { width: 100%;}

#landing article { z-index: 1;}
#landing form { padding: 20px 0px;}

#about article {padding: var(--wh01) var(--space3) 0px; text-align: right;}
#about figure { position: relative;}
#about figure img { margin-top: calc(-1*var(--wh02));}

.dark, #pricing>div h3 { background-color: var(--primary); color: var(--white);}
#how, #pricing { margin-top: calc(-1*var(--wh01)); padding: var(--wh01) 0px;}
#how>p { width: var(--wh06); margin: var(--centered);}
#how>div {  margin: var(--centered); display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh03)  var(--wh03) var(--wh03); padding: var(--space4) var(--space2); }

#pricing>div {  margin: var(--centered); display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh03)  var(--wh03) var(--wh03) var(--wh03); padding: var(--space4) var(--space2); }

#pricing>div h3 { height: var(--wh02); padding: var(--space3) var(--space2) 0px; }
#pricing>div span { font-size: var(--font4); line-height: var(--line4);}
#pricing li { text-align: left;}

#terms { padding: var(--space6);}

#contact { padding: var(--space4) 0px; }
#contact form label { display: block; }
#contact form {   display: grid; justify-content: center; grid-gap: 0px var(--gap);  grid-template-columns: var(--wh03)  var(--wh03) ; padding: var(--space4) var(--space2);    text-align: center;
	grid-template-areas:"input1 input2" 
						"input3 input4"  
						"input5 input5"
						"input6 input6";
}


input[type="checkbox"] { float: left; }

#contact label  	{ line-height: var(--line3); padding: var(--space3) 0px 0px;}
#contact input 		{ border:1px solid var(--black); width: 100%; }
#contact textarea { width: 100%; min-height: 100px;   }
#contact form>div:nth-child(1) { grid-area: input1; }
#contact form>div:nth-child(2) { grid-area: input2; }
#contact form>div:nth-child(3) { grid-area: input3; }
#contact form>div:nth-child(4) { grid-area: input4; }
#contact form>div:nth-child(5) { grid-area: input5; }
#contact form>button { width: var(--wh06); line-height: var(--line3);  }
.loginpage, #bodyregisterlogin { min-height: 100vh; background: url('../../media/cover/cover1.webp') no-repeat center fixed; background-size: cover; }
form>input { margin: var(--space2) 0px; }
.button01a { line-height: var(--line3);}

#register, #login { padding: var(--space6) 0px; text-align: center;}
#register h3, #login h3 { text-transform: uppercase;}
#register input, #login input { text-align: center;}
.terms  { line-height: 36px; font-size: 12px; }
@media screen and (max-width: 768px) {
	#contact { padding-bottom: var(--wh02);}
	#contact .group { grid-template-columns: var(--wh02)  var(--wh02) ; }
	#contact form>button { width: var(--wh04); line-height: var(--line3);  }
	#landing { background-position: -520px 0px; padding: 0px;}
	.head { background: transparent;}
	#about article { text-align: center;}
	#pricing>div h3 {height: auto; padding: var(--space3) var(--space1); }
	#how>div, #pricing>div { grid-template-columns: var(--wh04); padding: var(--space3) var(--space1); }
	#about figure img { margin-top: 0;}
	section { overflow-x: hidden;}	
}