:root {
	--body-bg: linear-gradient(rgb(174, 179, 182) 0%, rgb(244, 244, 244) 300px);
	--border-radius: 0.25rem;
	--transition-speed: 0.3s;

	/* COLORS */
	--black:  #000;
	--black30:  rgba(0,0,0,0.3);
	--white:  #fff;

	--brand-primary:  #244b83;
	--light-grey: #ccc;
	--med-grey: #333;
	--body-bg-blend: #dedfe0;

	--media-query-small: 35rem;

	/* FONTS */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

*,
*:before,
*:after {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 -ms-flex:0 1 auto;
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--black);
	font-family: var(--font-body);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6,label {
	font-family: var(--font-heading);
}
p {
	line-height: 1.5;
	margin: 0 0 1rem;
}
.layout-grid {
	background-color: rgb(244, 244, 244);
	display: grid;
	grid-template-columns: 12.5rem 5fr;
	min-height: 100vh;
}
@media (max-width: 767px) {
	.layout-grid {
		grid-template-columns: 6fr;
		grid-template-rows: 3;
	}
}
header {
	position: absolute;
	left: 1.5rem;
	top: 1rem;
	z-index: 10000;
}
@media (max-width: 767px) {
	header {
		left: 1rem;
		top: 0.3rem;
	}
}

.black {
	color:  var(--black);
}
.black30 {
	color:  var(--black30);
}
.brand-primary {
	color: var(--brand-primary);
}

/* Nav */
nav {
	background-color: var(--brand-primary);
	color: #fff;
	grid-row: 1 / 3;
	padding: 6rem 1rem 2rem;
}
nav a {
	border-radius: var(--border-radius);
	color: var(--white);
	display: block;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.8rem;
	text-decoration: none;
	transition: 
		background var(--transition-speed) ease,
		color var(--transition-speed) ease,
		padding var(--transition-speed) ease;
}

nav a:hover, nav a:focus {
	background-color: rgba(255, 255, 255, 0.7);
	
	color: #281810;
}
nav a.social-icon {
	float: left;
	padding-top: 3rem;
	padding-right: 1rem;
}
nav a.social-icon:hover, nav a.social-icon:focus {
	background-color: transparent;
	padding-top: 2.5rem;
}
nav a.social-icon img {
	height: 1.875rem;
	width: 1.875rem;
}
.neilson-logo {
	width: 9.375rem;
	height: auto;
}
@media (max-width: 767px) {
	.neilson-logo {
		width: 7.5rem;
	}
}
@media (min-width:  768px) {
	nav a span {
		display: block;
	}
}
.nav-scrim {
	display: none;
}
@media (max-width: 767px) {
	nav {	
		bottom: 0;
		grid-column: 1 / 3;
		grid-row: 3 / 4;
		height: 3.75rem;
	    overflow-x: scroll;
	    overflow-y: hidden;
	    padding: 0 0 0 1rem;
	    position: fixed;
	    white-space: nowrap;
	    width: 100%;
	    z-index: 10000;
	}
	nav a {
		display: inline-block;
		margin-top: 0.275rem;
		padding: 1rem;
	}
	nav a.social-icon {
		float: none;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 1rem;
		position: relative;
		top: 0.625rem;
	}
	nav a.social-icon:hover, nav a.social-icon:focus {
		background-color: transparent;
		padding-top: 0;
		top: 0.313rem;
	}
	nav a:last-of-type {
		padding-right: 3.75rem;
	}
	.nav-scrim {
		display: inline-block;
		background: -ms-linear-gradient(right, rgba(108,108,108,0) 0%, rgba(36, 75, 131, 1) 100%);
		background: linear-gradient(to right, rgba(108,108,108,0) 0%, rgba(36, 75, 131, 1) 90%);
		content: ' ';
		height: 3.75rem;
		pointer-events: none;
		position: fixed;
		right: 0;
		bottom: 0;
		width: 5rem;
		z-index: 10;
	}
}

/* End Nav */

main {
	background: var(--body-bg);
	padding: 1rem;
}
@media (max-width: 767px) {
	main {
		padding-top: 4.3rem;
	}
}
main a {
	color: var(--brand-primary);
}
main a:visited {
	color: var(--black);
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
}
	.flex-column-50 {
		flex-basis: 100%;
	}
	.flex-column-33 {
		flex-basis: 100%;
		padding: 0.5rem;
	}

@media screen and ( min-width: 35rem ) {
	.flex-column-50 {
		flex-basis: 50%;
	}
	.flex-column-33 {
		flex-basis: 50%;
	}
}

@media screen and ( min-width: 65rem ) {
	.flex-column-50 {
		flex-basis: 50%;
	}
	.flex-column-33 {
		flex-basis: 33%;
	}
}

.section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.mt0 {
	margin-top: 0;
}
.mb0 {
	margin-bottom: 0;
}
.pt0 {
	padding-top: 0;
}
.pb0 {
	padding-bottom: 0;
}

/* Home page */

.shopboards {
	margin: 0 auto;
	overflow: scroll;
	padding-bottom: 1rem;
}
.shopboards ul {
	margin:0 auto;
	display: flex;
	flex-wrap: nowrap;
	padding: 0;
}
.shopboards.flex-wrap ul {
	flex-wrap: wrap;
	justify-content: center;
}
.shopboards li {
	background-color: var(--light-grey);
	border-radius: var(--border-radius);
	color: var(--med-grey);
	font-size: 0.75rem;
	line-height: 1.3;
	list-style-type: none;
	margin: 0.5rem;
	padding: 0.5rem 0.25rem;
	text-align: center;
	width: 8.875rem;
	transition: box-shadow var(--transition-speed) ease, margin var(--transition-speed) ease;
}
.shopboards li:hover,
.shopboards li:focus {
	box-shadow: 0 1px 8px var(--med-grey);
	margin-top: 7px;
}
.shopboards li a {
	color: var(--med-grey);
	text-decoration: none;
}
.shopboards li a:hover,
.shopboards li a:focus {
	color: var(--black);
}
.shopboards li img {
	border:none;
	margin-bottom: 4px;
	padding-top:4px;
}
.rider-shot {
	background-image: url('../images/von-3x-pro.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* End Home page */

/* Dealers */
.dealer-card {
  display: flex;
  justify-content: center;
	margin-bottom: 1rem;
	padding: 1rem;
}
/* End Dealers */

footer {
	background-color: rgb(244, 244, 244);
	color: var(--black30);
	display: flex;
	font-size: 0.75rem;
	line-height: 1.5;
	margin-top: auto;
	padding: 0 2rem 2rem;
}

footer h4 {
	margin: 0;
}
footer a {
	color: var(--black30);
	transition: color 0.3s ease;
}
footer a:hover, footer a:focus {
	color: var(--brand-primary);
}
.footer-column {
	flex-basis: 50%;
}
.footer-column:nth-of-type(2) {
	text-align: right;
}

@media (max-width: 475px) {

	footer {
		flex-wrap: wrap;
		line-height: 2;
	}
	.footer-column,
	.footer-column:nth-of-type(2)
	{
		text-align: center;
	}

}

@media (max-width: 767px) {
	footer {	
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		padding-bottom: 4.5rem;	
	}
	.footer-column {
		flex-basis: 100%;
	}
}

.button-cta {
	margin-top: 2rem;
}
.button,
.button:visited,
.newsletter button[type="submit"],
.newsletter button[type="submit"]:visited,
form input[type=submit] {
	background-color: var(--brand-primary);
	border: none;
	border-radius: var(--border-radius);
	color: var(--white);
	display: inline-block;
	font-size: 1rem;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	text-align: center;
	transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}

.button:hover,
.button:focus,
.newsletter button[type="submit"]:hover,
.newsletter button[type="submit"]:focus {
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--black);
}

/* Main Grid Wrapper styling below */
.home-wrapper { 
  display: grid; 
  grid-template-columns: repeat(1, 1fr); 
  grid-auto-columns: 12rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

@media screen ( min-width: 481px ) and ( max-width: 640px ) {
	.home-wrapper {
		grid-template-columns: repeat(2, 1fr); 
	}
}

@media screen and ( min-width: 641px ) {
	.home-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
	.box1 { 
	  grid-row-start: 1; 
	  grid-row-end: 3;
	}

	.box2 { 
	  grid-column-start: 2; 
	  grid-column-end: 4;  
	}

	.box5 { 
	  grid-column-start: 3; 
	  grid-column-end: 4;  
	  grid-row-start: 2; 
	  grid-row-end: 4; 
	}
	.box6 { 
	  grid-column-start: 1; 
	  grid-column-end: 3;  
	  grid-row-start: 3; 
	  grid-row-end: 4;
	}
	.box7 { 
	  grid-column-start: 1; 
	  grid-column-end: 4;  
	  grid-row-start: 4; 
	  grid-row-end: 6;
	}
	.box10 {
	  grid-column-start: 1;
	  grid-column-end: 4;
	}
}

@media screen and ( min-width: 1200px ) {
	.home-wrapper {
		grid-template-columns: repeat(4, 1fr);
	}
	.box2 { 
	  grid-column-start: 2; 
	  grid-column-end: 4;  
	}
	.box7 { 
	  grid-column-start: 1; 
	  grid-column-end: 5;
	}
	.box10 {
	  grid-column-start: 1;
	  grid-column-end: 5;
	}
}

/*@media screen and ( max-width: 1099px ) {
	.home-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
	.box2 { 
	  grid-column: span 2;  
	}
	.box7 { 
	  grid-column-start: 1; 
	  grid-column-end: 4;
	}
	.box10 {
	  grid-column-start: 1;
	  grid-column-end: 4;
	}
}*/

@media screen and ( min-width: 1100px ) {
	.box2 { 
	  grid-column-start: 2; 
	  grid-column-end: 4;  
	}
}

@media screen and ( min-width: 1200px ) {
	.box7 {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.home-wrapper > article,
header > nav,
footer > article,
.card {
	background-color: var(--black30);
	border-radius: var(--border-radius);
	box-shadow: 0 0.188rem 0.625rem var(--black30);
	padding: 1rem;
}

.home-wrapper .newsletter-cta.card {
	background-color: transparent;
	box-shadow: none;
}

.home-wrapper .box10 {
	padding: 0 0 2rem;
}

.box {
	position: relative;
	min-height: 12.5rem;
	overflow: hidden;
}

.dealer-card {
	background-color: var(--black30);
	border-radius: var(--border-radius);
	box-shadow: 0 0.188rem 0.625rem var(--black30);
	padding: 1rem 1rem 1.5rem;
	margin: 0.5rem;
}

.dealer-card img {
	border-radius: var(--border-radius);
}

.card-label,
h1.card-label,
h2.card-label {
	color: rgba(255,255,255,0.3);
	font-size: 2rem;
	font-family: var(--font-body);
	font-weight: 100;
	position: absolute;
	right: -0.125rem;
	bottom: -0.438rem;
	margin: 0;
}

/* Pricing card styles */
.pricing-card {
	text-align: center;
}

.pricing-card h3 {
	font-size: 3rem;
	font-weight: 200;
	margin-bottom: 2rem;
	margin-top: 0;
	font-family: var(--font-body);
	color: var(--brand-primary);
}

.pricing-card h4:after {
	content: '';
	display: block;
	width: 5rem;
	border-top: 1px solid var(--black30);
	margin: 1rem auto 0;
}

.pricing-card-footer {
	background-color: var(--brand-primary);
	color: var(--white);
	padding: 1rem;
	margin-left: -1rem;
	margin-right: -1rem;
	margin-bottom: -1rem;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
}

@media screen and ( min-width: 35rem ) {
	.column-count-two {
		column-count: 2;
		column-gap: 2rem;
	}
}

.section-title {
	letter-spacing: 0.075rem;
}

.text-center {
	text-align: center;
}

.sticky-heading {
	background-color: var(--body-bg-blend);
	margin-left: -1rem;
	margin-right: -1rem;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1rem;
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Newsletter Signup */
.newsletter label, .newsletter .textfield, .newsletter .js-cm-email-input, .newsletter button {
	margin-top: 1rem;
}
.newsletter label {
	font-size: 1rem;
	font-weight: bold;
}
.newsletter .textfield, .newsletter .js-cm-email-input {
	border-radius: var(--border-radius);
	border: none;
	font-size: 1rem;
	margin-left: 1rem;
	padding: 0.625rem;
}
.newsletter button[type="submit"] {
	cursor: pointer;
}

/* Boards Page styles */
.boards,
.boards li,
.boards li ul {
	list-style-type: none;
	padding-left: 0;
}
.boards li {
	position: relative;
	text-align: center;
}
.boards li img {
	margin: 0 auto;
}
.boards li h5 {
	margin: 0;
	padding-top: 1rem;
}
.boards li ul li {
	padding: 2rem 0;
}
@media screen and ( min-width: 35rem ) {
	margin-left: 0;
}
.boards img {
	max-width: 560px;
	width: 100%;
}

/* Form styles */

form fieldset {
	border: none;
	padding: 1rem 1rem 1rem 0;
}
form legend {
	margin-left: 50px;
	padding:0 0.5rem;
}
form .form-row {
	margin:10px 10px 15px;
}
form .form-row-centered {
	margin:10px 10px 15px;
	text-align: center;
}
form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
input[type=text]:hover,
input[type=text]:focus,
input[type=email]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus
 {  
	background-color:#ddd;  
}
input[type=text],
input[type=email],
input[type=phone],
textarea,
select {
	background-color: var(--white);
	border-radius: 0.25rem;
	border: 1px solid var(--black30);
	font-size: 1rem;
	max-width: 320px;
	padding: 0.75rem;
	width: 100%;
}
form input[type=submit]:hover, .newsletter button[type=submit]:hover, .cta-button:hover {
	border-color: #244b83;
	cursor: pointer;
}
form input[type=submit]:active, .newsletter button[type=submit]:active, .cta-button:active {
	padding:11px 0 9px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

#contactform,
#Order {
	margin-top: 2rem;
}
.form-title {
	margin-bottom: 0;
}
.orderform-magic {
  display: none !important;
}

@media screen and ( min-width: 35rem ) {

	form .form-row {
		display: flex;
		align-items: center;
	}

	form label {
		display: inline-block;
		width: 15vw;
		text-align: right;
		margin-right: 0.675rem;
		margin-bottom: 0;
	}

	#contactform input[type=submit],
	#Order input[type=submit]
	 {
		margin-left: 16vw;
	}

}

/* Board Model Styles */

@media screen and ( min-width: 900px ) {
	.surfboard .page-wrapper {
		display: grid;
		grid-gap: 0 2rem;
		grid-template-areas: "main sidebar"
												 "footer footer";
		grid-template-columns: 2fr 1fr;
	}
	.surfboard .surfboard-content {
		grid-area: main;
	}
	.surfboard .surfboard-sidebar {
		grid-area: sidebar;
		padding-top: 16rem;
	}
	.surfboard .surfboard-footer {
		grid-area: footer;
	}
}
.surfboard .surfboard-sidebar article:not(:last-of-type) {
	margin-bottom: 2rem;
}
.surfboard-get-started-cta .button {
	margin-top: 1rem;
}
.board {
	width: 100%;
	height: auto;
	max-width: 555px;
}
.fins {
	padding-left: 24px;
	border-left: 1px solid #666;
	min-height: 300px;
}
.fins h4 {
	margin-left:-5px;
}
.fins img {
	margin-left:-25px;
}
.fins img.fin-brands {
	margin:10px 0 0 0px;
}