/* Template
=========== */
html {
	scroll-behavior: smooth;
}
article {
	font-family: 'Rubik', sans-serif;
}
article hr {
	border-color: #ccc;
	padding: 0;
	margin: 0;
}
section .container-fluid {
	padding: 0;
}
section {
	padding: 30px 0;
}
section#hero {
	padding: 0;
}
section.content h2 {
	margin: 0 auto 15px;
	text-transform: uppercase;
}
figure {
	text-align: center;
}
figure img {
	width: 100%;
	object-fit: cover;
}
.vcenter {
	display: flex;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	align-items: center;
	justify-content: center;
}
.vcenter-fixed {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	max-width: 85%;
}
.hcenter {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
}
.tabs.cc3 {
	column-count: 3;
}
.tabs.cc4 {
	column-count: 4;
}
.tabs.cc5 {
	column-count: 5;
}
ul.scrollmenu li {
	display: inline-block;
}
.list-alpha li {
	list-style: lower-alpha;
}
.seams .flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}
.seams .flex-column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

/* Horizontal scroll-swipe navigation */
.scrollmenu,
.scrollcarousel {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.scrollmenu li.temp {
	min-width: initial;
}
.scrollcarousel .item {
  display: inline-block;
  vertical-align: top;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollmenu::-webkit-scrollbar,
.scrollcarousel::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollmenu,
.scrollcarousel {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 


/* Hero
======= */
#hero .vcenter {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
}
#hero img {
	position: absolute;
	z-index: 1;
	width: 100%;
}
#hero .vcenter-fixed {
	background-color: #1c99c4;
	background-color: rgba(28, 153, 196, .9);
	z-index: 2;
}
#hero h1,
#hero h2 {
	color: #fff;
	font-family: 'Panton Black Caps', sans-serif;
	font-size: 30px;
	line-height: 1.1;
}
#hero h2 {
	color: #fff;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	line-height: 1.25;
}


/* Table of contents
==================== */
section#toc {
	text-transform: uppercase;
	line-height: 3;
}
section#toc ul {
	margin-bottom: 0;
	margin-left: 0;
}
section#toc ul li {
	list-style-type: none;
}


/* Content sections
=================== */
section h2 {
	font-weight: 300;
	font-size: 13px;
}


/* Tabbed sections
================== */
section.tabbed .tabs {
	margin: 0 auto;
}
section.tabbed .tabs li {
	list-style-type: none;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 10px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	border-bottom: 5px solid transparent;
}
section.tabbed .tabs li figure img {
	height: 90px;
}
section.tabbed .tabs .active,
section.tabbed .tabs li:hover {
	border-bottom: 5px solid #1c99c4;
}
section.tabbed .tabtarget > li {
	display: none;
	background-color: #f1f1f1;
}
section.tabbed .tabtarget > li ul {
	margin-left: 15px;
}
section.tabbed .tabtarget > li.active {
	display: inline;
}
section.tabbed .tabtarget h3 {
	text-transform: uppercase;
	margin: 15px 0;
}
section.tabbed .tabtarget figure {
	margin: 0 -15px;
}

/* Temperature tabs -specific
============================= */
section#temps .tabs li {
	margin: 0 2px;
}
section#temps span {
	display: block;
	padding: 5px 10px;
	border-radius: 2px;
}
section#temps .hot span {
	background-color: #ec7f86;
}
section#temps .warm span {
	background-color: #f8bd7f;
}
section#temps .medium span {
	background-color: #fff17f;
}
section#temps .cool span {
	background-color: #7fc8c4;
}
section#temps .cold span {
	background-color: #7fc7ef;
}
section#temps figure {
	max-height: 350px;
	overflow: hidden;
}

/* Zip type tabs -specific
========================== */
section.tabbed.ziptypes .tabs li {
	padding: 15px;
	width: 100%;
}

/* Seams tabs -specific
======================= */
section.tabbed.seams .tabs li {
	margin-right: 5px;
}
section.tabbed.seams .tabtarget li .image {
	min-height: 305px;
	background-size: cover;
}
section.tabbed.seams .flex-column.flex-image figure,
section.tabbed.accessories .flex-column.flex-image figure {
	margin: 0 15px 0 -15px;
}

/* Calendar
=========== */
section#calendar ul {
	column-count: 3;
	padding: 0;
	margin: 0 auto;
}
section#calendar ul li {
	background-color: #f1f1f1;
	list-style-type: none;
	padding: 15px 5px;
	margin-bottom: 15px;
	min-height: 110px;
}
section#calendar ul li .month {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 13px;
}


/* Sizes
======== */
section#size iframe {
	margin-top: 15px;
	max-height: 200px;
}


/* Linings carousel
=================== */
section#lining .tabtarget > li {
	padding-bottom: 15px;
}
.scrollcarousel.linings {
	padding: 0;
}
.scrollcarousel.linings .item {
	width: 42.5%;
	margin-right: 5px;
	background-color: rgba(0, 0, 0, .075);
	display: inline-block;
	min-height: 375px;
}
.scrollcarousel.linings h3,
.scrollcarousel.linings p {
	white-space: initial;
}
.scrollcarousel.linings h3 {
	line-height: 1.5;
	padding: 5px 15px 10px;
}
.scrollcarousel.linings p {
	padding: 0 15px;
}
.scrollcarousel.linings .item figure {
	max-width: 100%;
	margin: 0 auto;
	padding: 15px;
}

/* Linings tabs -specific
======================= */
section#lining .tabs li {
	margin-right: 5px;
}

/* Accessories tabs-specific
============================ */
section.tabbed.accessories .tabs li {
	width: 100%;
}

/* Custom dropdown
================== */
.guide-dropdown {
	width: 100%;
	max-width: 200px;
	border: 3px solid #1c99c4;
	color: #1c99c4;
	position: relative;
	margin: 0 auto;
}
.guide-dropdown select {
	display: inline-block;
	width: 100%;
	padding: 10px 20px 10px 10px;
	text-transform: uppercase;
	text-align: center !important;
	background-color: transparent;
	box-shadow: none;
	text-shadow: none;
	font-weight: 500;
	position: relative;
	z-index: 10;
}
.guide-dropdown .icon {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	z-index: 1;
}
.guide-dropdown select::-ms-expand {
    display: none; /* remove from ie11 */
}
.guide-dropdown select {
	-webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    text-transform: uppercase;
}


/* Wetsuit selector
=================== */
.wetsuit-selector {
	background-color: #fff;
}
.wetsuit-selector .controls {
	text-align: center;
	display: block;
	z-index: 9999999;
}
.wetsuit-selector .button {
	max-width: 75vw;
	padding: 10px;
	margin: 10px 10px 0;
	text-transform: uppercase;
	text-align: center;
	color: #1c99c4;
	border: 3px solid #1c99c4;
	background-color: #fff;
	box-shadow: none;
	text-shadow: none;
	font-weight: 500;
	border-radius: 0;
}
.wetsuit-selector .button {
	padding: 10px 15px;
	line-height: 1.25;
}
.wetsuit-selector .button.active {
	background-color: #1c99c4;
	color: #fff;
}
.wetsuit-selector .category-display,
.wetsuit-selector .products-display {
	display: none;
}
.wetsuit-selector .category-display.active,
.wetsuit-selector .products-display.active {
	display: block;
}
.wetsuit-selector .products-display .item {
	min-height: initial;
	max-height: 340px;
	max-width: 40%;
	margin-top: 30px;
	margin-bottom: 30px;
}
.wetsuit-selector .products-display .item span {
	white-space: initial;
}
.wetsuit-selector .products-display .item img {
	display: block;
	width: 100%;
	max-width: 100px;
	margin: 0 auto;
}
.wetsuit-selector .productListEntry {
	padding: 0;
	margin: 0 15px 0 0;
}

.ziptypes .wetsuit-selector,
.accessories .wetsuit-selector {
	padding: 30px 0 0 0;
}

.ziptypes .wetsuit-selector .productListEntry a,
.accessories .wetsuit-selector .productListEntry a {
	color: initial;
	border: 0 none;
}

/* vertically centered flex */
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}


	@media (min-width: 768px) {
		.wetsuit-selector .products-display .item {
			max-width: 30%;
		}
	}
	@media (min-width: 1024px) {
		article p,
		article li {
			font-size: 16px;
		}
		article h2,
		article h3 {
			font-size: 18px;
		}
		section {
			padding: 45px 0;
		}
		#hero {
			margin: 0;
		}
		#hero h1 {
			font-size: 275%;
		}
		#hero h2 {
			font-size: 120%;
		}
		#hero .vcenter-fixed {
			max-width: 650px;
		}
		#toc ul li,
		section h2 {
			text-align: center;
			font-weight: 400;
		}
		#thickness figure {
			width: 100%;
			max-width: 600px;
			margin: 20px auto;
		}
		ul.scrollmenu li {
			min-width: initial;
			margin-right: 0;
			padding: 15px;
			display: block;
		}
		.scrollmenu li.temp {
			min-width: 150px;
			padding: 15px 5px;
			margin: 0 !important;
		}
		.scrollmenu li.active,
		.tabbed ul li.active {
			background-color: #f1f1f1;
		}
		.scrollmenu li.temp span {
			max-width: 100px;
			margin: 0 auto;
		}
		

		.flex-row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
		}
		.flex-column {
			display: flex;
			flex-direction: column;
			flex-basis: 100%;
			flex: 1;
		}

		section.tabbed .tabs li {
		    margin-left: 0;
		    margin-right: 0;
		}

		section.tabbed .tabtarget h3 {
			font-weight: 500;
		}
		section.tabbed .tabtarget .text {
			padding: 15px 60px 15px 15px;
		}
		section.tabbed.seams .tabtarget .text,
		section#lining .tabtarget .text {
			padding: 15px 60px 15px;
		}
		section.tabbed .tabtarget figure {
			margin: 0;
		}
		section#calendar ul {
			column-count: 6;
			margin: 15px 0;
		}
		section#calendar ul li {
		   	font-size: 12px;
		    padding: 15px 30px;
		}
		section#calendar ul li .month {
		    font-size: 14px;
		}

		.wetsuit-selector .products-display .item {
			max-width: 23.999999%
		}
		.wetsuit-selector .button {
		    max-width: 300px;
		    line-height: 1;
		}
		.wetsuit-selector .guide-dropdown {
			float: left;
		}
		.wetsuit-selector .category-display .controls {
			float: right;
		}

		section#size iframe {
		    max-height: 500px;
		}

		section.tabbed.ziptypes .tabs li figure {
			max-width: 100px;
			margin: 0 auto 10px;
			opacity: 0.75;
		}

		.ziptypes .wetsuit-selector .category-display .controls,
		.accessories .wetsuit-selector .category-display .controls {
			float: none;
		}

		.scrollcarousel.linings {
			margin: 20px auto 0;
			width: 100%;
			overflow: initial;
		}

		.scrollcarousel.linings p {
			font-size: 14px;
		}

		.scrollcarousel.linings .item {
			width: initial;
			min-height: 450px;
		}

		/* override some owl carousel styling */
		.scrollcarousel .owl-stage-outer {
			/*max-width: 100%;*/
			margin: 0 auto;
		}
		.scrollcarousel .owl-prev {
			left: -30px;
		}
		.scrollcarousel .owl-next {
			right: -25px;
		}

		.wetsuit-selector .button {
			margin: 10px 0 0 10px;
		}

		section.tabbed.seams .tabs li {
			width: 100%;
		}
		section.tabbed.accessories .flex-column.flex-image figure,
		section.tabbed.seams .flex-column.flex-image figure {
			margin-bottom: 0;
			margin-left: 0;
		}
		section.tabbed.accessories .flex-column.flex-image {
			max-width: 385px;
		}
		section.tabbed.seams .flex-column.flex-image {
			max-width: 400px;
		}

		.scrollmenu {
		  white-space: initial;
		}
	}

	@media (max-width: 1023px) {
		/* fix for scrollable menu on mobile without breaking tabs on desktop */
		.mobile-scroll {
			column-count: initial !important;
		}
		article h3 {
			font-size: 12px;
		}
		article h2 {
			font-weight: 400;
		}
	}