#libraryContainer
{
max-width: 62.5rem;
margin: 0 auto;
padding: 0 .5rem;
}

#libraryContainer .video-container
{
margin-top: .5rem;
margin-bottom:0;
}

.customer-service #libraryContainer
{
display: grid;
}

.learn-landing-intro
{
font-size: 1rem;
padding: 0 1rem;
text-align: center;
max-width: 46rem;
margin: 2rem auto 2rem;
line-height: 1.25;
}

.customer-service article a
{
text-decoration: underline;
}

.customer-service .btn
{
text-decoration: none;
}

.international .btn, .btn.intlDealerLocator
{
margin: 1rem 0;
}

aside h2
{
font-size: 1.5rem;
}

aside h2:nth-of-type(2)
{
margin-top: 1rem;
}

aside ul
{
margin: 0;
padding: 0 0 0 1.25rem;
}

aside li
{
margin-bottom: .5rem;
}

aside .mayAlsoLikeItemWrapper
{
display: grid;
grid-gap: .5rem;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
margin-bottom: 1rem;
}

figure
{
margin: 0;
display: table;
}

figure img
{
display: block;
max-width: 100%;
height: auto;
}

figcaption
{
padding: .5rem;
font-style: italic;
display: table-caption;
caption-side: bottom;
background-color: #efefef;
}

.libraryImageCenter img, .libraryImage img, .libraryImageRight img, .libraryImageLeft img, img.libraryImageLeft, img.libraryImageRight, img.libraryImage, img.libraryImageCenter
{
display: block;
}

.libraryImageCenter, .libraryImage, .libraryImageRight, .libraryImageLeft, .libraryImageCenter img, .libraryImage img, .libraryImageRight img, .libraryImageLeft img {
    max-width: 100%;
    height: auto;
/*     display: block; */
    margin-left: auto;
    margin-right: auto;
}

table.fitlist td
{
text-align:center;
padding: .5rem;
}


.checklist
{
width: 100%;
}

.checklist td
{
border-top: .0625rem solid #ddd;
padding: .5rem;
}

#library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-header.jpg) center center no-repeat;
background-size: cover;
display: grid;
justify-content: center;
align-content: center;
position: relative;
}

#library-landing-header::after
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-image: linear-gradient(120deg, #eaee44, #33d0ff); */
background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
opacity: .65;
}

#library-landing-header > * {
    z-index: 1;
}

#library-landing-header h1
{
color: #fff;
text-align: center;
max-width: 48rem;
font-size: 3rem;
text-shadow: 0 0 .25rem rgba(0,0,0,1);
padding: 2rem;
}

#library-landing-header h1 a
{
color: #fff;
}

.learn-sups #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-sup2.jpg) center center no-repeat;
background-size: cover;
}

.learn-camping #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-camping.jpg) center center no-repeat;
background-size: cover;
}

.learn-kayak-touring #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-touring.jpg) center center no-repeat;
background-size: cover;
}

.learn-whitewater-kayaking #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-ww-kayaking.jpg) center center no-repeat;
background-size: cover;
}

.learn-rafting #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-rafting.jpg) center center no-repeat;
background-size: cover;
}

.learn-apparel #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-apparel.jpg) center center no-repeat;
background-size: cover;
}

.learn-all #library-landing-header
{
background: #000 url(https://dh36nblqpps8a.cloudfront.net/assets/learn/layout/learn-header.jpg) center center no-repeat;
background-size: cover;
}


.learnSearch
{
width: 80%;
max-width: 36rem;
margin: 0 auto;
grid-area: learnSearch;
}

.learn-category-listing .learnSearch
{
width: 100%;
max-width: none;
margin: 2rem 0 1rem;
padding: 0 .5rem;
}

.learnSearch form, .learnSearch fieldset
{
margin: 0;
padding: 0;
position: relative;
}

.learnSearch input[type=text]
{
border: .125rem solid #5e7f1f;
background-image: none;
background-color: #efefef;
box-shadow: none;
width: 100%;
border-radius: 10rem;
font-size: 1.25rem;
padding: .25rem .25rem .25rem 1.75rem;
margin: 0 auto;
color: #5e7f1f;
}

.learnSearch input::placeholder
{
color: #5e7f1f;
}

.learnSearch input::-ms-input-placeholder
{
color: #5e7f1f;
}

.learnSearch button {
border: none;
background-image: none;
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1rem;
color: #adc72e;
margin: 0;
padding: 0;
height: 100%;
position: absolute;
top: 50%;
left: .5rem;
transform: translateY(-50%);
}

.learnSearch .visuallyhidden
{
color: #111;
}


.learn-category-links-wrapper
{
max-width: 50rem;
margin: 0 auto 3rem;
display: grid;
grid-gap: 1rem;
margin-top: 1rem;
grid-template-columns: 1fr;
}

.learn-category-links-wrapper > div
{
border-bottom: .0625rem dotted #ccc;
padding: 1rem;
}

.learn-category-links-wrapper h2
{
font-size: 1.5rem;
}

.learn-category-links-wrapper h2 a
{
color: #444;
}

.learn-category-links-wrapper ul
{
margin: .5rem 0 0;
padding: 0 0 0 1.25rem;
}

.learn-category-table td, .learn-category-table th
{
border-top: .0625rem solid #eee;
padding: .5rem;
vertical-align: top;
}

.learn-category-table th {border-top: none;}

.learn-category-table td:first-of-type
{
padding-right: 2rem;
}

.learn-category-table p
{
margin: 0;
}

.learn-category-table p:first-of-type
{
margin-bottom: .5rem;
}


#customerServiceLandingBanner {
margin: .75rem 0 1rem 0;
padding: 13.25rem 0 0 .75rem;
width: 100%;
height: 16rem;
background: #222 url(https://dh36nblqpps8a.cloudfront.net/assets/banners/customer-service-banner.jpg) right bottom no-repeat;
background-size: cover;
text-transform: uppercase;
font-family: proxima-nova-extra-condensed,sans-serif;
font-weight: 600;
font-style: normal;
color: #fff;
font-size: 2.25rem;
text-shadow: 0 0 .125rem rgba(0,0,0,.8);
}

.flex-col-wrapper h3
{
text-transform: uppercase;
margin: 0;
padding: 0;
}

.flex-col-wrapper h3::before
{
content: '';
display: block;
margin-top: 1rem;
padding-top: 1rem;
border-top: .0625rem dotted #ccc;
}

ul#contactPageChat
{
list-style: none;
margin: .5rem 0 0;
padding: 0;
display: inline-block;
}

ul#contactPageChat a
{
text-decoration: none;
}

#contactPageChat .chat span.activeChat, #contactPageChat .chat span.inactiveChat
{
background-color: #005380;
padding: .75rem 1.25rem;
border-radius: .5rem;
color: #fff;
}

#contactPageChat .chat span.inactiveChat
{
background-color: #eee;
color: #005380;
border:.0625rem solid #005380;
}

.frameSpecBlock
{
margin-bottom: 2rem;
}

div select#jumpToSelection
{
margin-bottom: 2rem;
}

.frameSpecBlock img
{
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}

.frameSpecBlock h3
{
padding: .5rem 0 0 .75rem;
margin-bottom: 0;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}

.frameSpecBlock table
{
width: 100%;
}

.frameSpecBlock tr
{
border-bottom: .0625rem solid #efefef
}

.frameSpecBlock td
{
padding: .5rem;
}




/* ******************************************
	Media Queries for screen wider than 30rem (480px)
****************************************** */

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

	.libraryImageRight {
	float: right;
	margin: 0 0 .25rem .5rem
	}

	.libraryImageLeft {
	float: left;
	margin: 0 .5rem .25rem 0
	}
   
} /* end @media screen and (min-width: 40rem)  */



/* ******************************************
	Media Queries for screen wider than 37.5em (600px)
****************************************** */

@media screen and (min-width: 37.5rem) {
	
	.learn-category-links-wrapper
	{
	grid-template-columns: 1fr 1fr;
	}
   
} /* end @media screen and (min-width: 37.5rem)  */

/* ******************************************
	Media Queries for screen wider than 40em (640px)
****************************************** */

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


	.libraryCaptionRight {
	font-size: .5rem;
	text-align: right
	}

	.libraryCaptionLeft {
	font-size: .5rem;
	text-align: left
	}

	.libraryCaptionCenter {
	font-size: .5rem;
	text-align: center
	}

	.learn-landing-intro
	{
	font-size: 1.25rem;
	}
   
} /* end @media screen and (min-width: 40rem)  */



/* ******************************************
	Media Queries for screen wider than 48em (768px)
****************************************** */

@media screen and (min-width: 48rem) {
	
	#library-landing-header
	{
	min-height: 20rem;
	}
	
	#library-landing-header h1
	{
	font-size: 4rem;
	}
	
	.learn-article article
	{
	grid-area: article;
	}

	.learn-article aside
	{
	grid-area: aside;
	/* 
position: sticky;
	top: 1rem;
	height: 100vh;
	overflow-y: auto;
 */
	}
	
	.learn-article #sideNav, .learn-category-listing #sideNav
	{
	grid-area: sideNav;
	}

	
	.learn-article #libraryContainer
	{	
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: .75rem;
	grid-template-areas:
		"sideNav article"
		"sideNav aside"
	}
	 
	.learn-category-table
	{
	grid-area: learn-category-table;
	}
	
	.learn-category-listing #libraryContainer
	{
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: .75rem;
	grid-template-areas:
		"sideNav learnSearch"
		"sideNav learn-category-table"
		"sideNav ."
		;
	}

	.customer-service #libraryContainer
	{
	grid-template-columns: 1fr 3fr;
	column-gap: .75rem;
	}
	
	.customer-service #sideNav
	{
	margin-top: 1rem;
	}

	
	
	

} /* end @media screen and (min-width: 48rem)  */


/* ******************************************
	Media Queries for screen wider than 62.5rem (1000px)
****************************************** */
@media screen and (min-width: 62.5rem) {

	
	
	.learn-article #libraryContainer
	{	
	grid-template-columns: unset;
	grid-template-areas: none;
	
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	}
	
	.learn-article #sideNav, .learn-article article, .learn-article aside
	{
	grid-area: unset;
	}
	
	.learn-article #sideNav
	{
	flex: 0 0 11.6875rem;
	min-width: 11.6875rem;
	}

	.learn-article article
	{
	flex: 1;
	}

	.learn-article aside
	{
	flex: 0;
	min-width: 11.6875rem;
	}
	
	aside
	{
	margin-top: 2.75rem;
	}
	
	.customer-service #libraryContainer
	{
	grid-template-columns: 1fr 4fr;
	}
	
	.flex-col-wrapper {
	display: flex;
	flex-flow: row wrap;
	}
	
	.cs-col-1 {
	flex:0 0 65%
	}
	
	.cs-col-1 p {
	max-width: 90%;
	}

	.cs-col-2 {
	flex: 0 0 35%;
	padding:0 0 0 1rem;
	}

} /* end @media screen and (min-width: 62.5rem)  */