@font-face {
  font-family: KanitL;
  src: url(fonts/Kanit-Light.ttf);
}

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

@font-face {
  font-family: PatrickR;
  src: url(fonts/PatrickHand-Regular.ttf);
}

:root {
  --seu_blue:#312783;
  --grey-light:#d3d3d3;
  --grey-dark:#383838;
  --yellow:#d0b101;
  --orange:#f28d00;
  --blue:#499ccd;
}

* { margin:0; padding:0; color:var(--seu_blue); }
body { background:var(--grey-light) url("../img/striped_lens.png") repeat; }
.clear, 
.divider { clear:both; }

div { display:block; }
img { max-width:100%; }

.left,
.right { display:inline-block; width:50%; margin:0; }
.left { float:left; }
.right { float:right; }


.stage { width:1200px; margin:0 auto 6em; }
@media only screen and (max-width: 1200px) {
  .stage { width:100%; }
}

.divider { width:100%; border-top:1px solid var(--grey-dark); margin-top:10px; padding-top:10px; }

.grid-sizer 		{ width:20%; }
.grid-item 			{ width:18%; margin:1%; }
.grid-item.w1		{ width:18%; }
.grid-item.w2		{ width:38%; }
.grid-item.w3		{ width:58%; }
.grid-item.w4		{ width:78%; }
.grid-item.w5		{ width:98%; }

.grid-item > *,
.grid-item > .left > *,
.grid-item > .right > *,
.grid-item a div.wrap.logo { margin:10px; }
.left,
.right,
.grid-item > img 		{ margin:0px; }

ul { list-style:outside disc; }
ul li { margin-left:13px; padding-left:0px; }


.grid-item.hero 			{ }
.grid-item.detail 			{ }
.grid-item.intro 			{ }
.grid-item.functional1 		{ }
.grid-item.functional2 		{ }
.grid-item.features 		{ }
.grid-item.fastening_head,	
.grid-item.fastening_1,
.grid-item.fastening_2,
.grid-item.fastening_3,
.grid-item.fastening_4 		{ }
.grid-item.howitworks_head 	{ }
.grid-item.pricing 			{ }
.grid-item.order 			{ }




.grid-item.hero 	{ background: var(--grey-light) url("../img/helmclip/bg_grey_dsahed_white.jpg") no-repeat right top; }
.grid-item.detail 	{ background:white; padding:2em 0; }
.grid-item.intro 	{ background:var(--orange); }
.grid-item.order 	{ background:var(--yellow); }

.grid-item.fastening_head { border-top:1px solid var(--seu_blue); }

@media only screen and (max-width: 768px) {
 	.grid-item.w1,
	.grid-item.w2,
	.grid-item.w3,
	.grid-item.w4,
	.grid-item.w5		{ width:100%; margin:0; }
}



/*  12 columns standard grid (nested inside masonry grid) */
.columns { display:inline-block; float:left; }
.columns.twelve { width:100%; }
.columns.eleven { width:91.6%; }
.columns.ten { width:83.3%; }
.columns.nine { width:75%; }
.columns.eight { width:66.6%; }
.columns.seven { width:58.3%; }
.columns.six { width:50%; }
.columns.five { width:41.6%; }
.columns.four { width:33.3%; }
.columns.three { width:25%; }
.columns.two { width:16.6%; }
.columns.one { width:8.3%; }



@media only screen and (max-width: 768px) {
 	.columns.six, 
	.columns.four, 
	.columns.three { width:100% }
}


.wrap.logo { width:150px; }
.wrap.herohelmet { max-width:100%; overflow:hidden; margin-right:0; }
.wrap.herohelmet img { width:100%; margin-left:10%; }

table { border-collapse:collapse; }
table.pricing { margin-top:1em;}
table tr td { border:1px solid var(--grey-light); padding:0.2em 0.7em;}
table.ordering tr td { border:1px solid white; }
td.amount { text-align:right; }

/* F O N T */

body { font-family:KanitL, Verdana, Arial, Geneva, sans-serif; font-size:15px; line-height:17px; }
h1, h2, h3, h4, h5, h6, em, strong { font-weight:normal; }
h1, h2, h3, h4, h5, h6 { margin-bottom:10px; }
h1, h5, em, strong { font-family:KanitBL, Verdana, Arial, Geneva, sans-serif; }
h2, h3, h4, h6 { font-family:KanitL, Verdana, Arial, Geneva, sans-serif;  }
.handwritten,
.claim p { font-family:PatrickR, Georgia, "Times New Roman", Times, serif; font-size:1.4em; margin-bottom:2em; }
.productname h1 { font-size: 7em; line-height: 0.75em; }
.grid-item.intro p,
.grid-item.intro td,
.grid-item.detail p { font-size:1.3em; line-height:1em; }
.grid-item.order h1 { text-transform: uppercase; letter-spacing: 0.04em; font-size:2.8em; line-height:1em; margin:10px 0;  }
.grid-item.order h1,
.grid-item.order h4,
.grid-item.order h3,
.grid-item.order p,
.grid-item.order td,
.grid-item.order .label,
.grid-item.order div,
.grid-item.order div a { color:white; margin:10px; }
/* .grid-item.order a { color:var(--seu_blue); } */
.grid-item.footer p { font-size:0.8em;}

.howitworks_head h2,
.howitworks_head p { margin-bottom:10px; }



/* order form */

.bto_order {
	box-shadow:inset 0px 1px 0px 0px #dcecfb;
	background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
	background-color:#bddbfa;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:KanitL, Verdana, Arial, Geneva, sans-serif;;
	font-size:24px;
	padding:8px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
	margin:1em 0 0.25em 0;
}
.bto_order:hover {
	background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
	background-color:#80b5ea;
}
.bto_order:active {
	position:relative;
	top:1px;
}

.pieces table tr td {
	border:none;
}

.pieces table tr td {
	border:none;
}

.grid-item.order .productvariant.white { background:#FFF; }
.grid-item.order .productvariant.black { background:#000; }
.grid-item.order .productvariant.white span { color:#000; !important }
.grid-item.order .productvariant.black span { color:#FFF;}

form[name="helmclipbestellung"] { margin:4em; }
form[name="helmclipbestellung"] input[type="text"] { font-size:1.05em; border:1px solid #ddd; padding:0 5px; margin:0 0 3px; width:90%; }
form[name="helmclipbestellung"] input[name="zip"]{ width:26%; }
form[name="helmclipbestellung"] input[name="city"]{ width:60%; }
form[name="helmclipbestellung"] input.pieces { width:4em; text-align:right; }

form[name="helmclipbestellung"] .personaldata .label { text-align:right; padding-right:10px; }
form[name="helmclipbestellung"] input[type="submit"] { float:right; margin:50px 100px 40px 0; }

form[name="helmclipbestellung"] p.terms,
form[name="helmclipbestellung"] p.info.payment { margin:10px 0;}


@media only screen and (max-width: 768px) {
 	.productname h1 { font-size:5em; line-height: 1em; }
}

.grid-item.order { margin-top:4em;}

@media only screen and (max-width: 768px) {
 	.grid-item.order { width:90vw; margin:2em 5vw; }
}